본문 바로가기
tip

CSS 절대위치를 상대위치로 잡기(?) position: relative와 absolute의 응용

by [김경민]™ ┌(  ̄∇ ̄)┘™ 2013. 11. 8.
728x90


[출처] http://qnrdlqkrwhdgns.canxan.com/jpboard/post/238


position: absolute를 사용하면 문서전체를 기준으로해서 위치를 잡습니다.
즉, absolute 라는 뜻답게 절대적인 위치입니다!
가령,

position: absolute; top: 100px; left: 80px;

반면에,
position: relative를 사용하면 기존에 자리를 잡던 위치를 기준으로해서 위치를 잡습니다.
즉, relative 라는 뜻답게 상대적인 위치입니다!
가령,

position: relative; top: 100px; left: 80px;

그런데, 가끔 상대적이면서 절대적인(?)것이 필요할때가 있습니다.

한번 아래의 코드를 보세요!
HTML:
<div id="wrap"> <div id="inner"> <!-- .. --> </div> </div>


CSS:
#wrap { position: relative; } 

#inner { position: absolute; top: 100px; left: 80px; }

이런 경우에, #inner가 문서전체를 절대적인 기준으로 해서 위치를 잡을까요?
아닙니다!

문서 전체가 아니라 #wrap를 기준으로 해서 위치를 잡습니다!
즉, 상위 객체가 relative이고 하위 객체가 absolute 라면, 상위객체의 위치를 기준으로 합니다!

[출처] http://area51.lesha.co.kr/?c=2/45&iframe=Y&p=6&recnum=7&type=review&uid=14


우리는 레이어가 떠다니게 하기 위해서 position 이라는 스타일속성을 사용합니다.

주로 absolute라는 값을 통해 절대 좌표로 레이어를 이동시킵니다.

 

종종 우리는 어느 개체 내부에서(표같은거..) absolute를 사용한 레이어를 절대 좌표 값을 설정하는데

개체 내부(표안...)에 띄우는데 어려움을 겪곤 합니다.

 



이 때, 필요한 것은 문서를 기준으로한 절대 좌표가 아니라 상대적인 또는 새로운 좌표계가 필요합니다.

이 새로운 좌표계를 만드는 방법이

레이어를 포함한 개체의 스타일속성 position에 "relative"를 설정해주는 것입니다.

 

비교 예문)

<div style="margin-left:200px; width:200px; height:200px; background-color:gray">

  <div style="position:absolute; left:50px; top:50px">절대좌표</div>

</div>


<br/>

 

<div style="margin-left:200px; position:relative; width:200px; height:200px; background-color:gray">

  <div style="position:absolute; left:50px; top:50px">내부좌표</div>

</div>


728x90

댓글