CSS에서 position 속성

CSS의 position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성입니다. position 속성에 쓸 수 있는 값은 5개가 있습니다. static, relative, absolute, fixed, sticky가 있습니다.

static

position속성의 기본 값으로 다른 요소와의 관계에 의해 자동으로 배치되고 top, left, right, bottom등의 offset 값을 지정해줄 수 없습니다.

relative

원래 있던 위치를 기준으로 좌표를 지정합니다. 원래 있던 위치는 position : static(default) 이었을 때를 기준으로 합니다.

absolute

원래 위치와 상관 없이 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. absolute 속성은 기준점이 중요합니다. absolute는 position 값이 static이 아닌 것 중 가장 가까운 요소(부모태그)를 기준으로 합니다.

부모요소에게 relative 값을 주게 되면 absolute는 해당 부모요서의 위치를 기준으로 삼게 됩니다.

fixed

absolute속성과 비슷하게 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 정해줍니다. 반면 기준점은 뷰포트의 왼쪽 위 꼭지점으로 합니다.

sticky

sticky는 기준점을 넘지 않을 때는 relative처럼 동작하다가 기준점을 벗어나면 fixed처럼 동작합니다. scroll이 계속되면 마지막 위치에서 멈춥니다. 일반적인 상황에서 sticky속성의 기준점은 부모요소가 됩니다.