안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다.
포지션이란 이름처럼 태그들의 위치를 결정하는 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과 정렬에 대해 알아보겠습니다!
익명
