2009.12.08 19:54 | 개발이야기

오늘은 position에 대해 이야기를 해 볼까 합니다.
position 속성은 해당 박스의 위치 기준점을 결정하는 역할을 하는 녀석으로,
기본적으로 position 속성이 갖는 값은 static, relative, absolute, fixed 네가지가 있습니다.
일단, 테스트를 해볼 목적으로 박스를 몇 개 만들어 보고 기본적인 스타일을 적용 시켜 보도록 하겠습니다.

HTML

CSS


위와같이 작성을 하고 브라우저로 불러오면 아래와 같이 요소들이 딱딱 붙어있는 문서를 만날 수 있습니다.


아무 속성을 주지 않으면 기본적으로 position: static 과 동일한 상태를 유지합니다.
static인 상태에서는 위치를 지정해주는 top, left, bottom, right 의 오프셋이 적용되지 않습니다.

자, 그럼 이제 css를 몇군데 살짝 수정해서 relative는 어떤녀석인지 보도록 하겠습니다.


CSS를 위와같이 수정을 하면 다음과 같은 화면을 볼 수 있습니다.


우리가 수정한 요소를 보면 #1번 요소와 #3, #4번 요소의 CSS를 수정 했는데요,
수정을 했더니 위치가 조금씩 변경이 되어있음을 확인 할 수 있습니다.

relative 속성값은 기준점을 상대적(relative)으로 잡습니다.

쉽게 생각해서 해당 요소가 static으로 있을때의 위치를 기준으로 top에서 얼마만큼,
left에서 얼마만큼 움직인다고 생각하면 됩니다.

위의 static일때의 위치와 비교를 해서 보면 어떻게 움직인건지 한눈에 확인 할 수 있습니다 ^^;

다음은 absolute 값인데요, 일단 CSS를 아래와 같이 수정 해 보도록 하겠습니다.


위와 같이 수정을 하면 다음과 같이 화면이 변하는 것을 확인할 수 있습니다.


재미있게 변했는데요, inner요소 자체가 위로 올라가고, inner요소 안에 있던 #4번 요소가
inner 요소 안의 최상단에 위치하게 되고, #1, #2, #3, #5번 요소는 웹문서 영역의 원점(좌측 상단) 을 기준으로
우리가 지정해준 위치대로 위치하게 됩니다.

absolute 값은 말 그대로 '절대적' 인 좌표값을 지정해주는 값입니다.
이전의 static이나 relative와는 달리 자신이 위치했던 공간은 싹 사라지고
그 위에 레이어를 덧붙히듯 붕 뜨는 효과를 가져오게 됩니다.

말 그대로 '절대적' 인 좌표를 갖는다고 생각하시면 됩니다..^^

여기서 #3번 요소는 조금 더 설명이 필요한데요,
그쪽부분은 inner 요소가 static이라 오프셋을 가지지 않아서 위와같이 보이게 되는겁니다.

한번 inner요소가 오프셋을 줘 보도록 하겠습니다.


이렇게 오프셋을 주고나면 화면은 요렇게 변하게 됩니다.


즉, inner요소 밖에 있는 #1, #2, #5번 요소는 웹문서의 좌측상단을 원점으로 해서 보여지게 되고,
inner요소 안에 있는 #3번 요소의 경우 inner요소의 좌측 상단을 원점으로 해서 요소 안에 오프셋을 가지게 됩니다.

#3번 요소의 부모요소(inner)의 left와 top값을 그대로 반영 후, #3번 요소의 값을 반영했다고 보면 됩니다.

마지막으로 fixed가 남아있네요..^^;

fixed는 ie6에서는 구현이 되지 않습니다..^^ 위의 예제에서 #3번요소만 fixed로 바꿔보도록 하겠습니다.


이렇게 바꿔서 보면 inner요소 안에 있던 #3번 요소가 부모요소인 inner밖으로 삐져나오는것을 확인 할 수 있습니다.


이 fixed값은 기본적으로 화면의 좌측 상단을 원점으로 갖게 해주는데요,
재밌는점은 웹문서가 스크롤이 생겨 스크롤을 할 시, 해당 요소는 항상 같은 위치에 고정적으로 보여지게 됩니다.


이처럼 말이죠..^^

absolute와 fixed의 큰 차이점은 이렇게 화면에 고정적으로 보여진다는점,
즉 absolute는 부모요소의 오프셋을 받아와서 거기서 자신의 오프셋을 정하지만,
fixed는 해당 화면을 기준으로 오프셋을 결정한다는 점 입니다.

이러한 요소의 오프셋을 주는건 가끔 꼬이면 막막하게 느껴질때가 많습니다.
여러 요소들이 중첩되어있는 경우라면 더 심각하죠..^^;

이러한 네가지 값에 따라 어떤식으로 오프셋이 변하는지를 확실하게 알고 가면
조금 시간이 걸릴뿐, 요소들의 위치를 잡는데 큰 도움이 되지 않을까 합니다.

'개발이야기' 카테고리의 다른 글

CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
CSS Sprite 를 이용한 간단한 롤오버 메뉴  (2) 2009.12.07
IE8 다음 지도 API Polyline문제  (9) 2009.11.24
다음 지도 API를 이용한 GPS정보 처리  (3) 2009.10.22