앵커에 올려 놓은 상태로 절대 위치 지정을 유지하지 않습니다.

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

를 사용해야합니다. 정적 위치로 두십시오.

working example

요소가 절대 위치되면 절대 상대가되거나 고정 설정된 위치에 가장 가까운 부모 자체가 상대 위치한다.

Answer 2

예상대로 절대 동작이 정확하게 작동하고. 난 당신이 원하는 것을 이해하면 당신은 pics 클래스에서 position:absolute를 제거해야 position:fixed;

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

DEMO