두 번째 div가 상대적으로 위치가 지정된 div 밑에 표시됩니다.

Question

아래쪽 래퍼 div가 아래쪽에 표시됩니다. 상단 래퍼 div (정상적인 순서와 비슷 함).
는 지금은

내가 잘못 여기서 뭐하는 오전 최고 래퍼 underneeth 보여주는거야?

http://jsfiddle.net/uqtZ5/

HTML

<div id='top-wrapper'> 
    <a href='#'>Title to overlay</a> 
    <img src='image.jpg' /> 
</div> 
<div id='bottom-wrapper'> 
    <a href='#'><h3>Header</h3></a> 
    <p>Lorum ipsum</p> 
</div> 

CSS

#top-wrapper { 
    position:relative; 
} 

#top-wrapper a, 
#top-wrapper img { 
    position: absolute; 
} 

#top-wrapper a { 
    background-color:#FF0000; 
    z-index: 10; 
} 

Answer 1

당신은 절대적으로 최고의 래퍼 위치에와 IMG을 설정합니다.

이 경우 위치는 상대적으로 위치가 지정된 DIV에서는 절대적이지만 상단 래퍼의 높이를 설정하지 않았으므로 절대 배치 된 내용이 div bottom-wrapper 위에옵니다. img 높이와 일치하도록 상단 래퍼 높이를 지정하고 문제가 해결되는지 확인하십시오.

그래서이 시도 : 이미지가 절대적으로 배치되어 있기 때문에

#top-wrapper { 
    position:relative; 
    height: 216px; 
}