relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... > html

메뉴만들때 보통 이렇게 하죠...

<div style="position:absolute; ~">

그런데 이경우 홈페이지가 좌측에 붙어있는경우에는 유용하지만
가운데나 오른쪽으로 정렬된 홈페이지에선 메뉴의 위치가 바뀌게 됩니다.

그럴경우엔 relative를 사용해야하는데....

<div style="position:relative; ~">

이경우엔 해당 레이어의 크기만큼 그 레이어의 태그가 있는 곳에 자리를 차지하게 됩니다.

이때는 메뉴레이어들을 전체적으로 하나의 레이어로 감싸준후 그레이어에 absolute속성을 부과하면 됩니다.

예)
<div style="position:absolute;">

<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>

</div>


[요약]
absolute는 자리를 차지하지는 않지만 가운데 혹은 오른쪽 정렬의 홈페이지에서는 브라우저 크기에따라 레이어의 위치가 바뀌고,
relative는 위에 언급한 위치가 바뀌지 않는대신, 자리를 차지합니다.
둘의 단점을 보완하는 방법이라 할수있겠습니다.


ps.

visibility:hidden; 옵션도 함께주면 좋습니다.
<div style="position:absolute;visibility:hidden;">

<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>

</div>