[CSS] position 5가지 속성 정리

position 속성은 요소의 위치를 제어하는 데 사용된다.
포지션을 어떻게 주느냐에 따라서 요소가 보이기도 하고 사라지기도 하던데 정확히 아는 것이 중요해보인다.

position: static

position 속성을 별도로 지정해주지 않으면 기본값으로 static이 적용된다. 요소는 일반적인 문서 흐름에 따라 배치된다. 이 때에는 top, right, bottom, left 속성을 주어도 적용되지 않는다. 왜냐면! static은 블록 요소는 위에서 아래로, 인라인 요소는 왼쪽에서 오른쪽으로 배치되기 때문에 위치 속성을 지정해도 무시되게 된다.

position: relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소를 원래 위치를 기준으로 상대적으로 배치해준다고 생각하면 된다. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서 요소가 원래 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지를 지정할 수 있다.

position: absolute

position 속성값 중 가장 난해하고 주의해서 사용해야 하는 친구라고 한다.. 많이들 relative 속성의 정반대 개념이라고 오해를 하는데 실제로는 오히려 relative 속성과 함께 사용되는 경우가 많다고 한다.

position 속성을 absolute로 지정한다고 해서 절대적인 위치를 갖는 것이 아니다. 상황에 따라 달라질 수 있는데, 그 이유는 position 속성이 배치 기준을 자신이 아닌 상위 요소에서 찾기 때문이다. DOM 트리를 따라 올라가다가 position 속성이 static 이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 요소가 배치 기준이 된다.

상당히 복잡하게 보여지지만 실제로 absolute 속성을 이용할 때에는 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야 하기 때문에 부모 요소의 position 속성을 relative로 지정해주는 것이 관례다.

  position: absolute 속성을 지정하게 되면 HTML문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다!
  즉, 무시하고 배치된다.

position: fixed

화면을 위아래로 스크롤해도 고정되어 움직이지 않는 UI가 바로 이 속성을 이용한 것이다!

이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(ViewPort), 즉 브라우저 전체 화면이기 때문이다. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로부터 해당 요소가 얼마나 떨어져있는가를 결정한다.

  position: fixed 속성 또한, 지정하게 되면 HTML문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다!
  즉, 무시하고 배치된다.

position: sticky

position 속성의 sticky 값은 CSS 에서 비교적 최근에 추가된 속성값이다. 브라우저 화면을 스크롤링할 때 효과가 나타난다.

  position: sticky
  top: 0

이와 같은 속성을 준다면, 스크롤바가 화면을 위로 올리면서 해당 div가 top:0 인 지점에서 끈적하게(sticky) 붙어서 움직이지 않게 된다. 나머지 요소들은 이에 구애받지 않고 화면에 따라 올라간다.

---

참고
https://www.daleseo.com/css-position/