锚上的悬停在绝对定位时不会停留在原地

Question

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

我试过在绝对位置的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。请保持它的静态位置。

工作示例

当一个元素处于绝对位置时，它将相对于最近的父元素进行定位，位置设置为绝对、相对或固定。

Answer 2

绝对行为完全按照它应该的方式运行。如果我明白你想要什么，你应该使用position:fixed;

img#top{
position:fixed;
left:*/adjust to your needs/*
}

演示