CSS 포지션 속성 정리

CSS 포지션(postion) 속성은 요소를 문서의 특정 위치에 배치할 때 사용합니다. 요소의 최종 위치는 포지션의 top, right, bottom, left 값에 따라 결정됩니다.

• static: 일반적인 흐름을 따라 요소를 배치하는 속성입니다.
• relative: 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용합니다.
• absolute: 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치합니다. 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 합니다. 다르게 말하자면, absolute 속성을 사용하려면 부모 요소에 특정한 포지션 속성이 부여되어 있어야 합니다.
• fixed: 요소를 일반적인 흐름이 아닌 뷰포트의 컨테이너 블록을 기준으로 배치합니다.
• sticky: 일반적인 흐름을 따라 요소를 배치하고 스크롤 되는 가장 가까운 부모 컨테이너 블록을 기준으로 위치 값을 적용합니다.

참고 자료: CSS Position, Mozilla