static
position 속성의 default 값으로 나열한 순서대로 배치한다.
relative
태그의 위치를 살짝 변경하고 싶을 때 relative 속성을 사용한다. top, right, bottom, left 속성을 사용하여 위치 조절이 가능하다.
- z-index는 태그들이 겹치는 경우 어떤 태그를 더 위에 배치할지 결정하는 속성입니다. 기본값은 0이고, top에 1을 주었기 때문에 다른 태그들보다 높게 위치합니다.
absolute
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 조상 중 포지션이 relative,absolute,fixed인 태그가 없다면 가장 위의 body 태그가 기준이 된다.
- #absolute는 조상 태그 중 positon 속성 값이 설정된 태그가 없기 때문에 body 태그를 기준으로 가장 오른쪽에 달라붙었다.
- #child 태그는 조상 태그인 #parent 가 position:relative이기 때문에 이를 기준으로 가장 오른쪽에 달라 붙었다.
fixed
fixed 속성은 이름 그대로 요소 값을 고정시키고자 할 때 사용합니다.
- 스크롤을 내려도 노란 배경의 fixed 부분이 우측 상단에 고정되어 있다.
sticky
sticky 속성은 위치에 따라서 동작방식이 달라지는데, 요소가 스크롤을 작동하기 전에는 relative 와 같이 동작하며, 스크롤을 작동시키면 fixed 와 같이 동작합니다.
참고 : https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
