Position
-
static - 요소를 문서 흐름에 맞추어 배치합니다. 브라우저에서 자연스럽게 요소들의 위치를 결정하게 됩니다.(명시적으로 position 속성을 나타내지 않아도 기본값으로 적용된다고 보면 됩니다.)
-
relative - 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정합니다.
relative는 static 이었을 때 어느 위치였는지를 기준으로 상대적인 요소의 위치를 결정합니다. -
absolute - 원하는 위치를 지정해 배치합니다.
기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소이며, left, right, top, bottom 속성값을 이용하여 요소를 위치시킵니다.(relative가 없다면 브라우저가 기준입니다.) -
fixed - 지정한 위치에 고정하여 배치합니다.
문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 브라우저 창이 기준이 됩니다.
브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다. -
sticky - 위치에 따라서 동작방식이 달라집니다. 요소가 임계점(scroll 박스 기준) 이전에 는 relative와 같이 동작합니다. 그 이후에는 fixed와 같이 동작합니다.
기준은 scroll 박스(뷰포트) 이며 scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻합니다.
만일, scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 합니다.
