position속성

1. static

요소를 normal flow에 따라 배치합니다. top, bottom, left, right값을 사용할 수 없습니다. 기본값입니다.

2. relative

요소를 normal flow에 따라 배치하고, 자기 자신(position을 바꾸지 않았을 때, static)을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 만약, top과 bottom, 또는 left, right를 동시에 선언하는 경우 top과 left가 우선시 됩니다.

오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

relative의 경우 자식 요소에 position:absolute속성을 이용하는 경우 부모상의 위치의 기준을 잡는 용도로 사용됩니다.

3. absolute

요소를 normal flow에서 제거되며 다른 형제요소들을 신경쓰지 않고 배치가 됩니다. 페이지 레이아웃에 공간도 배정하지 않습니다. 또한 부모요소를 타고 올라가면서, position이 static이 아닌 요소를 찾아 기준점으로 삼습니다. 만약 찾지 못한다면 body를 기준점으로 삼습니다. 실무에서는 대체로는 기준점을 삼고 싶은 부모에 position: relative를 넣어 사용합니다.

4. fixed

요소를 normal flow에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트를 기준으로 삼아 배치합니다. 또한 뷰포트를 기준으로 삼기 때문에 스크롤을 해도 마치 네비게이션바처럼 화면에 붙어 움직입니다.

fixed요소를 사용하는 경우 요소가 겹쳐질 수 있다는 점을 염두해두고 사용하는 것을 권장합니다.

5. sticky

인터넷 익스플로어에서는 지원되지 않고 모바일에서 지원되기 때문에 많이 사용이 됩니다.

요소를 normal flow에 따라 배치하고, 특정자리에 위치를 하다가 스크롤을 하게 되면 어느 지점 이후로 화면에 붙어 움직이게 됩니다. 주의점은 sticky를 사용하고자 하는 대상이 스크롤 하고자 하는 대상의 바로 아래 자식이어야 합니다.

아래 코드를 예시로 들면, 스크롤하고자 하는 대상이 body이기 때문에 sticky는 box에 적용되어서는 안되며 parent에 적용되어야 합니다.

<div></div>
<div id="parent">
  <div id="box"></div>
 </div>
<div></div>