如何使<img>位置:相对嵌套在一个位置:绝对

How can I make an <img> position: relative nested in a position: absolute <div> clikable with?

本文关键字：位置 一个 绝对 嵌套 img 何使 相对      更新时间：2023-09-26
可亲。

我正在将闪存轮播转换为JavaScript，但我对这个位置有问题。这是包含图像的div 的 CSS。

#tiovivo{
height:382px;
    width:793px;
    background-color:#F5F5F5;
    z-index:-1000;
overflow:hidden; 
position:relative; }

如果位置不是相对的，则JavaScript代码必须更长，并且图像超出边界

图像在div 中如下所示：

<div id="tiovivo">
<img id="tio4" style="cursor:pointer; position:absolute;" onClick="location.href='tio4.php'" height="150px" src="tio4.jpg">
<img id="tio5" style="cursor:pointer; position:absolute;" onClick="location.href='tio5.php'" height="150px" src="tio5.jpg">
</div>

问题是，当#tiovivo position:relative我无法单击图像时，事件"onclick"不起作用，并且光标指针不显示。

如果 #tiovivo 在position:static"点击"和cursor:pointer正常工作。

我需要图像"位置：绝对"，这样我可以轻松地将它们放在JavaScript代码中。

1.( 删除z-index:-1000以使div 中的所有元素都可单击。
2.(如果图像的位置absolute，您必须为它们添加垂直和水平位置(left或right，top或bottom(。

另请参阅我的 jsfiddle。

您的问题是z-index: -1000设置。

比较这个(与#tiovivo上的z-index(：

http://jsfiddle.net/ambiguous/5HZdp/

而这个(没有#tiovivo上的z-index(：

http://jsfiddle.net/ambiguous/HLp3Z/

您的负面z-index将#tiovivo及其子图像推到<body>以下，因此图像永远不会收到点击事件。您不需要z-index将绝对定位的图像放在顶部，默认情况下它们将位于顶部。

您的案例存在几个问题

  • 不涉及JavaScript，至少与这里的定位无关
  • 您正在使用绝对位置，没有其他位置属性，例如左，右等。
  • 删除z索引CSS，它将起作用。您将整个DIV放在其他所有内容下，即使它是透明的
谢谢

大家，这是我使用这个索引z-index: -1000，因为我正在编程"3D"效果，我想避免#tiovivo底部覆盖图像。

这是我用来更新转盘的功能

pos0+=(offx-tempX)/5000;if(pos0> 6.28318531){pos0-=6.28318531}
image0.style.left=offx+310*Math.cos(pos0)+"px";
ytilt=Math.sin(pos0);
image0.style.top=offy+310*ytilt*((offy+tempY)/1000)+"px";
image0.style.zIndex=Math.round(ytilt*10);
pos1+=(offx-tempX)/5000;if(pos1> 6.28318531){pos1-=6.28318531}
image1.style.left=offx+310*Math.cos(pos1)+"px";
ytilt=Math.sin(pos1);
image1.style.top=offy+310*ytilt((offy+tempY)/1000)+"px";
image1.style.zIndex=Math.round(ytilt*10);

我修复了向图像的 zIndex 添加偏移量的问题，因为 sin(( 函数从 -1 变为 1。

image0.style.zIndex=100+Math.round(ytilt*10);

并从#tiovivo中删除z-index: -1000

相关文章：