들어가며
position은 문서에서 요소의 위치를 지정하는데 사용됩니다. top, bottom, left, right 속성을 더해서 최종 위치를 결정할 수 있습니다. 이번 시간에는 CSS의 position 속성에 대해 알아보겠습니다.
static
요소의 default 값입니다. 따로 position을 지정하지 않으면 static으로 간주됩니다.
top, bottom, left, right 속성과 z-index 속성을 적용할 수 없습니다.
relative
요소의 처음 위치에서 상대적으로 위치를 이동시킵니다. 예를 들어, 'top: 10px'을 적용하면 요소는 원래 위치에서 10px만큼 위로 이동합니다. 이때 요소가 처음 있던 공간은 유지됩니다. 즉, 그 요소는 다른 곳으로 이동했지만, 요소가 원래 있던 자리는 여전히 그 요소가 차지하고 있는 것처럼 취급되어, 다른 요소가 그 자리에 위치할 수 없습니다.
요소의 위치를 약간 변경할 때 사용할 수 있습니다.
absolute
상위 요소 중 position이 static이 아닌 가장 가까운 요소를 기준으로 위치를 지정합니다. 만약 그런 요소가 없다면 초기 containing block (즉, 뷰포트 또는 루트 요소)를 기준으로 위치를 잡습니다. top, bottom, left, right 속성을 적용해 최종 위치를 결정합니다. absolute로 지정된 요소는 원래 있던 위치에서 완전히 분리되어, 그 공간은 사라지게 됩니다. 즉, 다른 요소가 그 공간에 위치할 수 있습니다.
팝업창, 드롭다운 메뉴 등을 만들 때 사용할 수 있습니다.
fixed
viewport(브라우저 창)를 기준으로 위치를 지정합니다. 스크롤을 해도 fixed로 지정된 요소의 위치는 변하지 않아, 화면에 붙어 있는 것처럼 보입니다. top, bottom, left, right 속성을 적용해 최종 위치를 결정합니다. fixed로 지정된 요소는 원래 있던 위치에서 완전히 분리되어, 그 공간은 사라지게 됩니다. 즉, 다른 요소가 그 공간에 위치할 수 있습니다.
네비게이션 바, 헤더, 사이드바 등을 만들 때 사용할 수 있습니다.
sticky
스크롤 위치에 따라 relative나 fixed처럼 동작합니다. 스크롤 위치가 sticky 요소의 지정된 위치를 넘어가기 전까지는 relative로 동작하며, 넘어간 이후는 fixed처럼 동작합니다.
sticky는 '스크롤 매커니즘이 있는' 가장 가까운 조상 요소에 붙습니다. 여기서 '스크롤 매커니즘이 있다'는 것은, 그 요소의 'overflow' 속성이 'hidden', 'scroll', 'auto', 'overlay' 중 하나로 설정되어 있음을 의미합니다. 이러한 설정은 해당 요소에 스크롤바를 생성하게 합니다.
이 때 주의해야 할 점은, sticky가 붙는 조상 요소는 실제로 스크롤되는 가장 가까운 조상 요소가 아닐 수도 있다는 것입니다.
특정 부분까지 스크롤하면 그 위치에 붙어있는 헤더나 사이드바 등을 만들 때 사용될 수 있습니다.
마치며
CSS의 position 속성은 웹페이지의 레이아웃을 구성하는데 있어 중요하므로 제대로 이해해야 합니다.
지적이나 다른 의견은 언제나 환영합니다 :D
감사합니다.