MDN
position
css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께합니다.
static
: 요소의 일반적인 문서 흘므에 따라 배치합니다. top, right ,bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.
See the Pen Untitled by ChanwooPark (@chanw9503) on CodePen.
relative
- 요소의 일반적인 문서 흐름에 따라 배치하고, 자기 자신 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
See the Pen Relative by ChanwooPark (@chanw9503) on CodePen.
- relative는 각가의 방향을 기준으로 태그 안쪽 방향으로 이동 한다.
- 보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치됩니다. 하지만 z-index라는 속성을 입히면 top 태그와 같이
더 위로 올라가는 것을 확인할 수 있습니다. - z-index라는 속성을 #top 태그에 더 높게 주었기 때문에 #left태그보다 위로 올라갔습니다.
absolute
relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직인다면, absolute는 position : static 속성을 가지고 있지 않은 조상을 기준으로 움직입니다. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
See the Pen absolute by ChanwooPark (@chanw9503) on CodePen.
- #absolute는 조상 태그 중 position : relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽에 달라붙어 있습니다.
- 반면 #child는 조상 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었습니다.
fixed
- 요소를 항상 고정된(fixed)위치에 배치할 수 있다.
- 예시로는, 홈페이지 같은 곳에 들어가보면 상단 navibar는 고정이 되어 움직이지 않는 곳이 있다.
sticky
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
See the Pen React Modal - Using CSS Styles by ChanwooPark (@chanw9503) on CodePen.
이 값은 항상 새로운 쌓임 맥락을 생성합니다. sticky는 "스크롤 동작"(overflow 가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "sticky" 동작을 보이지 않는 점에 주의