게시글

강좌3 - CSS - 3년 전 등록 / 10달 전 수정

CSS 포지션(position)

static, relative, absolute, fixed
조회수:
0

안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다.

포지션이란 이름처럼 태그들의 위치를 결정하는 CSS입니다.

static

일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

relative

여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

CSS 탭을 눌러 CSS를 확인해보세요. 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동했습니다.

#top 태그에 top: 5px를 줬는데 왜 아래로 이동했을 까요? 바로 relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다. 바깥쪽으로 이동하게 하고 싶으면 5px 대신 음수 -5px를 주면 됩니다.

또한 주목할 것은 #top이 #left보다 위에 있다는 겁니다. 보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치됩니다. 하지만 z-index라는 속성을 #top 태그에 더 높게 주었기 때문에 #left태그보다 위로 올라갔습니다.

z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성입니다. 기본값은 0이고요. #top에 1을 주었기 때문에 다른 태그들보다 높게 위치합니다. 조금 뒤에 z-index 강좌가 나옵니다.

absolute

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

위의 예시를 보면, #absolute는 조상 태그 중 postion: relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽으로 달라붙었습니다. 반면 #child는 조상 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었습니다. 차이를 아시겠죠?

참고로 absolute가 되면 div여도 더는 width: 100%가 아닙니다.

fixed

제 홈페이지를 보시면 상단 로그인 메뉴와 좌측 내비게이션 메뉴, 우측 명예의 전당, 그리고 하단 포스트 메뉴는 항상 특정 위치에 고정되어 있습니다. 스크롤을 내려도 그 자리에 계속 있죠. 바로 포지션이 fixed로 설정되어 있기 때문입니다.

위의 예시에서 스크롤을 내려보세요! fixed도 absolute처럼 더는 div가 width: 100%가 아닙니다.

다음 시간에는 float정렬에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

6개의 댓글이 있습니다.
3달 전
1
3달 전
감사합니다 도움 많이 되었습니다.
8달 전
인터넷으로 검색해서 다른 블로그들 설명은 전부 알아듣지 못할 용어들을 사용하면서 설명을 해서.... 그 내용을 이해하려면 또다시 그 용어들을 찾아봐야하는데, 제로초님은 진짜 초보들이 알아듣기 쉽게 설명해주시네요. 진짜 좋아요
8달 전
감사합니다~
일 년 전
쓰고 보니 나랑 거의 같은 댓글이.... !
일 년 전
친절한 설명 너무 좋아요. 한 가지 아쉬운 게 있다면 코드보는 창이 너무 작아서 조금 불편해요. 크게 볼 수 있으면 조금더 좋을 것 같아요. ^o^
일 년 전
안녕하세요.. absolute 설명에서 코드창이 너무 좁아서(크기변경 불가) 보기가 힘드네요.. 설명은 잘보고있습니다~! 감사합니다