CSS - Position 속성

position 속성

화면상에 요소를 배치하는 방법을 지정

- static

요소를 일반적인 문서 흐름에 따라 배치, 기본값

- relative

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용

- absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
조상 중 위치 지정 요소가 없는 경우 초기 컨테이너 블록이 기준
최종 위치는 top, right, bottom, left 값이 지정

- fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음
뷰포트의 초기 컨테이닝 블록을 기준으로 배치
요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 생각
최종 위치는 top, right, bottom, left값이 지정

- sticky

요소를 일반적인 문서 흐름에 따라 배치
테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left의 값에 다라 오프셋 적용