CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.
position 속성은 static, relative, absolute, fixed, sticky 중 하나의 값을 지정할 수 있습니다.
-
static
- 기본값입니다.
- 일반적인 문서 흐름에 따라 배치합니다.
- top, right, bottom, left, z-index 속성이 아무 영향도 주지 않습니다. -
relative
- 요소의 원래 위치를 기준으로 상대적으로 배치합니다.
- 요소의 원래 자리는 그대로 차지합니다.
- top, bottom, left, right 속성을 이용해서 요소의 원래 위치 기준으로 이동하도록 설정합니다. -
absolute
- 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
- 가장 가까운 포지셔닝(static 이 아닌 position 속성 값)된 조상 요소를 기준으로 배치합니다.
- 조상 중에 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 배치합니다.
- 보통 상위 요소의 position 속성을 relative 로 지정해서 배치할 기준을 잡고 사용합니다. -
fixed
- 브라우저 전체 화면을 기준으로 고정된 배치입니다.
- top, bottom, left, right 속성은 브라우저의 상, 하, 좌, 우에서 해당 요소가 얼마나 떨어져 있는지 결정합니다.
- 글의 흐름에서 완전히 빠집니다.
- 원래 요소의 자리는 차지하지 않습니다.
- navigation 을 만들 때 많이 사용합니다. -
sticky
- static 처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed 처럼 고정되어 배치됩니다.
- 기본적으로 static 처럼 요소의 원래 자리를 차지합니다.
- top, bottom, left, right 설정이 필요하고, 가장 가까운 스크롤되는 조상을 기준으로 배치합니다.
참고
