如何使悬停状态 div 相对于个人<li>而不是<li>容器？

Question

我有几个具有display: inline属性的<li>，以便它们彼此相邻排列。

这些<li>的s包含图像，因此效果是彼此旁边的大量缩略图大小图像。

悬停在图像上时，我设置了一个CSS属性，该属性显示了隐藏的Div。

的内容

此DIV是样式的，显示在图像上方，偏移左50px和Top -200px（想想工具提示样式定位和显示）。

#information {
    display: none;
}
ul li:hover #information {
    display:block;
    position: absolute;
    background:#FFFFFF;
    color: #000000;
    border: 1px solid #CCCCCC;
    width: 190px;
    height: 250px;
    left: 50px;
    top: -200px;
    overflow: hidden;
}

我想要的行为是，悬停状态div偏移相对于图像IE即单独的<li>。

我目前的行为是，悬停状态div偏移量相对于所有<li>的容器。

在上面的代码示例中，您可以看到悬停状态div位置是绝对的，我确实将位置设置为相对，但是当悬停这会导致另一个 <li> s改变其位置（这可能是因为这是因为悬停状态div必须具有display: block属性才能更改原始display: hidden属性），并且悬停状态DIV仍相对于容器而不是单个<li>显示。当我将位置设置为绝对时，<li>的位置会保留其定位。

所以我的问题是如何使悬停状态Div相对于单个<li>而不是<li> s的容器。

Answer 1

解决方案是将position: relative添加到ul li，z索引为2的z - 索引为悬停状态div。