요소(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 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.