Position
position 속성은 요소의 위치 특성을 지정하는 속성으로 이 속성을 통해 직접 위치를 설정하기 보다는 지정한 특성의 별도의 속성들을 통해 자세한 위치 설정을 다룬다.
즉, CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정하고, top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.
position 속성의 값으로는 static의 기본값을 제외한 absolute, relative, fixed, sticky가 존재한다.
구문
relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
sticky
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
예제를 통해 살펴보기
absolute의 경우 position의 relative 값을 가진 가장 가까운 상위 요소를 기준으로 위치가 지정된다. 모든 조상요소에 position의 relative가 지정되어 있지 않다면 뷰포트를 기준으로 위치가 지정되게 된다.
위의 코드에서 child의 부모 요소인 parent들의 position 속성을 각각 지정해보면 이해하기 쉽다.
fixed의 경우 뷰포트를 기준으로 위치가 지정되지만 요소를 변환시켜주는 transform, perspective, filter 속성이 조상 중에 포함되어 있다면 그 조상을 기준으로 위치가 지정되게 된다.
아래 코드에서 transform과 opacity 속성을 각각의 주석을 적용해보며 쌓임 맥락이 달라지는 요소들을 비교해 볼 수 있다.
쌓임 맥락과 관련하여 z-index 속성을 많이 다루는데 이 속성은 position 속성이 존재해야 z-index의 값 속성 적용이 가능하다. (예외적으로 flex, grid의 item들에도 사용 가능하다.)
position 속성에서 absolute와 fixed 값은 inline 형태의 요소들을 자동으로 block 형태로 변경시켜주며 이러한 속성의 동작 방식을 이해하고 있어야 다른 속성들이 동작하지 않는 예상치 못한 에러로 부터 대처할 수 있다.
참고자료
