CSS: Position property

CSS의 position 속성은 스타일링 타겟의 문서 내 배치 방법을 지정하는 속성이다.

아래 다섯가지 키워드 중 하나를 선택해 지정할 수 있으며, top right bottom left 속성을 통해 요소의 최종 위치를 결정할 수 있다.
1. static
2. relative
3. absolute
4. fixed
5. sticky

position: static;

• 요소에 position 속성을 지정하지 않았을 때 디폴트로 지정되는 속성이다.
• static 위치 속성을 지닌 요소는 일반적인 문서 흐름에 따라 배치된다.
• top right bottom left z-index 와 같은 속성에 영향을 받지 않는다.

position: relative;

• 요소를 일반적인 문서 흐름에 따라 배치하되, 해당 배치 위치를 기준으로 top right bottom left 에 지정된 만큼 오프셋으로 이동한다.
• z-index: auto가 아니라면 새로운 쌓임 맥락(stacking context)를 형성한다.

position: absolute;

• 요소를 일반적인 문서 흐름에서 제거하며 레이아웃에 공간 배정도 하지 않는다.
• 가장 가까운 위치 지정 부모 요소를 기준으로 top right bottom left 오프셋을 가지며 상대적으로 배치된다.
• 위의 가장 가까운 위치 지정 부모 요소란 가장 가까운 부모 요소 중 position: relative / absolute / fixed / sticky인 요소를 의미한다.
• z-index: auto가 아니라면 새로운 쌓임 맥락(stacking context)를 형성한다.

position: fixed;

• 요소를 문서 흐름에서 제거하고 레이아웃에 공간 배정도 하지 않는다.
• 요소의 위치는 뷰포트의 초기 컨테이닝 블록을 기준으로 배치된다. (예외: 요소의 조상 중 transform, perspective, filter 속성이 하나라도 있는 경우, 그 요소 기준 배치)
• 최종 위치는 top right bottom left 으로 결정된다.
• 항상 새로운 쌓임 맥락을 생성한다.

position: sticky;

• 요소를 문서 흐름에 따라 배치하되, 가장 가까운 스크롤되는 조상을 기준으로 오프셋이 적용된다.
• 항상 새로운 쌓임 맥락을 생성한다.
• 스크롤 동작이 존재하는 가장 가까운 조상에 달라붙는다. (overflow가 hidden, scroll, auto 혹은 overlay)
• 평소에는 relative처럼 행동하다가 컨테이닝 블록이 자신의 플로우 루트를 넘어가면 마치 fixed 처럼 화면에 고정된다.
• sticky 위치 지정을 동작하게 하려면 top right bottom left 중 최소 하나는 지정해서 해당 임계값을 넘어가면 fixed처럼 동작하게 만들어 줘야 한다. 그렇지 않으면 relative와 다를 것이 없다.

.sticky-container {
/* 이 요소는 기준 컨테이너가 위쪽 10px 임계를 내려올때부터 fixed 처럼 동작한다.*/
	position: sticky;
	top: 10px;
}

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/position