Question

我正在将flash轮播转换为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”事件不起作用，并且不会显示cursorpointer。

如果#tiovivo在position:static“onclick”中，cursor:pointer可以正常工作。

我需要图片“position：absolute”，所以我可以轻松地将它们放在javascript代码中。

感谢。

Answer 1

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

比较（使用z-index上的#tiovivo）：

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

和此（z-index上没有#tiovivo）：

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

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

Answer 2

您的案例有几个问题

没有涉及javascript，至少它与此处的定位无关
您使用的是绝对位置，没有其他位置属性，例如.left，right等。
删除 z-index CSS，它会起作用。你将整个DIV UNDER 放在其他所有地方，即使它是透明的

Answer 3

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

另见jsfiddle。

Answer 4

谢谢大家，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);

从z-index: -1000

中移除#tiovivo

如何设置<img/>位置：相对嵌套在一个位置：绝对<div>可点击？</div>

4 个答案: