CSS position

요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS의 position 속성에 대해서 알아보겠습니다.
top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성이 요소를 배치할 최종 위치를 결정합니다.
기본값은 static 입니다.

• static
  position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다.

  이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값 오프셋은 position 속성이 static일 때는 무시됩니다.

• relative
  요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

• absolute
  부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다.
  상위 엘리먼트 중에 position 속성이 static이 아닌 다른 값인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트를 기준으로 오프셋 값을 지정합니다.

최종 위치는 오프셋 top, right, bottom, left 값이 지정합니다.

• fixed
  화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본적이 있으신가요? 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법인데요. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.

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