position
1. CSS position 속성
position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. 이 속성은 복잡한 레이아웃을 구성할 때 매우 유용하게 사용됩니다. 다양한 position 속성값들이 있으며, 각각 고유한 특성을 가지고 있습니다.
1.1 static (기본값)
static은 position 속성의 기본값입니다. 이 값은 "정적인", "고정된" 상태를 의미합니다. static이 적용된 요소는 HTML을 작성한 순서대로 정상적인 흐름(normal flow)에 따라 위치가 지정됩니다. 이는 가장 기본적인 요소 배치 방식입니다.
1.2 relative
relative는 요소를 상대적으로 배치합니다. 이는 "상대적인" 위치를 의미하며, 요소가 원래 있어야 할 위치를 기준으로 상대적으로 위치를 조정합니다. relative로 설정된 요소는 다른 콘텐츠들의 위치에 영향을 미치지 않으면서 자신의 위치만을 조정할 수 있습니다.
1.3 absolute
absolute는 요소를 절대적인 위치로 배치합니다. 이 속성값이 적용된 요소는 가장 가까운 조상 중 position 속성이 static이 아닌 요소를 기준으로 위치를 잡습니다. absolute 요소는 일반적인 문서 흐름에서 제거되어 독립적으로 위치를 잡습니다.
1.4 fixed
fixed는 요소를 뷰포트(브라우저 창)를 기준으로 고정 위치에 배치합니다. 이 속성값이 적용된 요소는 스크롤을 해도 화면의 같은 위치에 고정되어 있습니다. fixed 요소 역시 일반적인 문서 흐름에서 제거됩니다.
1.5 sticky
sticky는 스크롤 위치에 따라 relative와 fixed 사이를 전환하는 특별한 속성값입니다. 스크롤하기 전에는 relative처럼 동작하다가, 지정된 임계점에 도달하면 fixed처럼 동작합니다.
position 속성을 사용할 때는 요소들이 서로 겹치거나 가려지지 않도록 주의해야 합니다. 또한, 브라우저 지원 여부를 확인하는 것도 중요합니다. 이러한 position 속성들을 적절히 활용하면 복잡한 레이아웃도 효과적으로 구현할 수 있습니다.