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

您应该从position:absolute课程中删除pics。只需将其置于静态位置即可。

working example

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

Answer 2

绝对行为的行为完全符合预期。如果我理解了你想要的东西，你应该使用position:fixed;

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

DEMO

悬停在锚上并不会保持绝对定位

2 个答案: