위치가있는 DIV 위치 지정 : relative

Question

div 레이아웃의 위치를 ​​설정해야하는 페이지 레이아웃이 있습니다. -30px DIV는 상대적으로 위쪽으로 : -30 정확히 배치됩니다.

그러나 다음 DIV가 맨 위에 30px 거리에 있습니다. 이 문제를 해결할 방법이 있습니까?

Answer 1

위치를 지정하십시오 : 절대; 및 그 상위 위치 : 상대적;

이것은 작동합니다. :)

Answer 2

position: relative 제가 생각하기에 그렇게 생각하지 않습니다. 즉, 절대적으로 배치 된 요소는 페이지가 아닌 상대 div에 상대적으로 배치됩니다. 예를 들어 :

<div id="header">Header</div> 
<div id="content"> 
    <div id="c1">Content One</div> 
    <div id="c2">Content Two</div> 
</div> 

와

#header { position: absolute; top: 0; left: 0; height: 150px; width: 100%; } 
#content { position: relative; margin-top: 150px; height: 500px; } 
#c1 { position: absolute; top: 0; left: 0; } 
#c2 { position: absolute; top: -50px; left: 0; } 

c1는 낮은 DIV 아닌 페이지 상단의 상단에있을 것입니다. content은 페이지 상단에서 150 픽셀입니다. c2이 부정적인 상단으로 인해 위에 표시됩니다. header은 페이지 상단에 있습니다.