[CSS] position의 속성과 특징(static, relative, absolute, fixed, sticky)

position 속성이란?

HTML에서 작성한 요소에 대해서 문서 내에서 배치되는 방식을 결정하는 것이 CSS의 position 속성의 역할이다. top, right, bottom, left 속성과 함께 사용하여 요소의 정확한 위치를 지정한다. 이때 top, right, bottom, left 속성의 값이 모두 똑같을 경우 inset 속성을 사용한다.

---

position: static

position 속성의 기본값으로 HTML에서 요소가 문서의 원래 있어야 할 위치에 배치되도록 해준다. 따라서 top, right, bottom, left 속성값은 무시된다.

position: relative

요소의 원래 위치를 기준으로 배치한다. top, right, bottom, left 속성을 통해 요소의 원래 위치에 있을 때부터 상하좌우로 얼마나 떨어지는지 지정할 수 있다. 이때 요소의 원래 자리는 그대로 차지하고 있는다.

position: absolute

가장 가까운 포지셔닝된 조상 요소를 기준으로 배치된다. 이때 "가장 가까운 포지셔닝된 조상 요소"의 의미는 자신이 아닌 상위요소 중 DOM 트리를 따라 올라가다가 position: static 속성이 아닌 가장 첫 번째 상위 요소라는 의미이다. absoulte가 적용된 요소는 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. 배치할 때는 top, right, bottom, left 속성을 활용한다.

position: fixed

브라우저 화면을 기준으로 고정된 배치이다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport)로 브라우저의 전체화면이기 때문이다. top, right, bottom, left 속성으로 배치 시 브라우저 좌측 상단에서 시작하는 것을 유의해야 한다.

position: sticky

static 속성처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다. 기본적으로 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.