html - 悬停在 anchor 上不会停留在绝对定位的位置

Question

我有 anchor (在无序列表中)，我想在悬停时在特定位置弹出图像。整体容器有相对定位，anchor类有绝对定位，但是图片明显是随着每个列表项向下移动，而不是像预期的那样绝对定位。

我试过将 div 包装在绝对定位的 div 中，但是......不行。

目标是有一个元素列表，这些元素会在旁边的日历上点亮日期，但是我无法让图像保持静止。

谢谢

CSS:

a { text-decoration: none; }


#container {
position:relative;
width:1100px;
height:680px;

margin:0px auto;
font-family:verdana, arial, sans-serif;
font-size:12px;
z-index:1;
border: 1px solid;}

#container a.pics {position: absolute;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; border:hidden; text-align:center;}
#container a.pics span img {margin:10px auto; border:1;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:105px; top:0px; z-index:5;}

img#top {
position:absolute;
top:0;
left:100px;
border:hidden;
z-index:-1;
} 

HTML:

<div id="container">
<ul>
<li><a class="pics" href="#">one<span><img id="top" src="image.jpg" width="30" height="30"></span> </a>     </li>
<li><a class="pics" href="#">two<span><img id="top" src="image.jpg" width="30" height="30"></span> </a>  </li>
<li><a class="pics" href="#">three<span><img id="top" src="image.jpg" width="30" height="30"></span>   </a></li>
</ul>

</div>

Answer 1

您应该从 pics 类中删除 position:absolute。只需将其保持在静态位置即可。

working example

当一个元素被绝对定位时，它会相对于最近的父元素定位自己，位置设置为绝对、相对或固定。