javascript - 如何使悬停图像位于其他元素之上

Question

我正在尝试悬停 图像并放大图像和图像信息。我希望悬停图像 div 位于其他图像 div 之上，而不是被其他图像 div 覆盖 我使用了 z-index 但它似乎不起作用。有人有好主意吗？非常感谢。

<div class='imgDiv'>
    <img src='a.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='b.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='c.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='d.jpg' />
    <p>hahaha</p>
</div>

......
.....I have so many images divs....

CSS

.imgDiv{
float:left;
}

.imgDiv:hover{

//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)


}

查询

$('.imgDiv').hover(function(){

  //not working...
  $(this).css('z-index','999');       

})

Answer 1

要使 z-index 起作用，position 必须是 absolute。您可能必须在悬停时切换绝对定位，并设置 top 和 left 属性，以便 div 保持原位。

如果你的 div 没有 float ，这会更容易。

请记住，绝对位置是相对于第一个定位元素的。不一定是 body 元素。它相对于第一个将其 position 设置为某物的父级。

编辑
正如@ahren 在他的评论中指出的那样，我错误地认为 z-index 仅适用于 position: absolute;。

也就是说，我设置了一个 fiddle使用您的代码，除了 javascript 部分，它似乎按预期工作。行为与 chrome/firefox/ie9 相同。也许您的 html/css 的其他部分导致了问题？还是我误解了问题？