이번 글에서는 요소를 배치되는 방식을 정의하는 position 속성에 대해서 설명하겠습니다. position 속성 값은 총 5가지로, ① static, ② relative, ③ absolute, ④ fixed, ⑤ sticky가 있습니다. position 속성 값이 정해지면 top, bottom, left, right 속성을 통해서 위치를 구체적으로 지정할 수 있습니다.
① static (기본값)
요소의 position 속성이 static으로 설정되면, 일반적인 문서의 흐름에 따라 배치됩니다. top, bottom, left, right 속성도 아무런 영향을 주지 못합니다.
② relative
요소의 position 속성이 relative로 설정되면, 일반적인 문서의 흐름에 맞는 위치에서 상대적으로 배치를 변경할 수 있습니다. 앞서 언급된 top, bottom, left, right 속성들을 통해 요소의 위치를 상하좌우로 조정할 수 있습니다.
③ absolute
position 속성이 absolute로 설정되면, relative와는 달리 일반적인 문서의 흐름에서 제거됩니다. 그리고 가장 가까운 상위 요소 중, position이 static이 아닌 요소를 기준으로 위치가 정해집니다. 만약 해당하는 상위 요소가 없다면, 최상위 요소인 <body> 요소가 기준이 되어 페이지를 스크롤하면 같이 움직이게 됩니다.
* absolute 요소의 작동 방식이 복잡하기 때문에 부모 요소의 position 속성을 relative로 설정하는 것이 대부분입니다.
(bottom: 30px; left: 30px;)인 div 요소
④ fixed
position 속성이 fixed로 설정되면, 일반적인 문서의 흐름에서 제거되며 뷰포트를 기준으로 위치가 지정됩니다. 화면을 스크롤해도 요소는 동일한 위치에 있게 됩니다.
현재 화면에서 우측 하단에 있는 요소가 fixed로 설정된 요소입니다.
(bottom: 0px; right: 0px;)인 div 요소
⑤ sticky
position 속성이 sticky로 설정되면, 스크롤된 위치를 기준으로 요소가 relative나 fixed처럼 작동하게 됩니다. 만약 일반적인 문서의 흐름에 맞는 위치가 뷰포트 내부에 있다면 relative처럼 보이게 됩니다. 하지만 페이지가 스크롤되어 뷰포트 밖으로 나가게 된다면 fixed처럼 동작하면서 뷰포트에 위치가 고정됩니다.
Hello World!
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
