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

Question

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

这些 <li> 包含图像，因此效果是许多缩略图大小的图像并排放置。

将鼠标悬停在图像上后，我设置了一个 css 属性来显示隐藏的 div 的内容。

此 div 已设置样式并显示在图像上方并向左偏移 50px 和顶部 -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 偏移量是相对于图像的，即个人 <li> 。

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

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

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

Answer 1

解决方案是向 ul li 添加一个 position: relative 并向悬停状态 div 添加一个 z-index 2。