javascript - 我怎样才能使 位置 : relative nested in a position: absolute clikable with?

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”事件不起作用，光标指针也不起作用显示。

如果#tiovivo 位于 position:static，则“onclick”和 cursor:pointer 会正常工作。

我需要图像“position: absolute”，这样我就可以轻松地将它们放入 JavaScript 代码中。

Answer 1

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

另见我的 jsfiddle .