position - css

position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정합니다.

position 속성의 값으로는 static, relative, absolute, fixed, sticky가 있고, top, bottom, left 속성으로 요소를 배치할 최종 위치를 결정합니다.

static

모든 웹 요소들은 기본적으로 Position 값이 static입니다.

relative

position 값이 static일 때의 위치를 기준으로, 웹 요소들의 위치를 변경하고 싶을 때, 값을 relative로 설정합니다.

absolute

position absolute는 relative 와는 다르게, position 값이 static이 아닌 부모를 기준으로 움직입니다.

부모의 position 값이 relative 일 경우, absolute 속성은 position이 static이 아닌 부모를 기준으로 움직이기 때문에, 그림에 서 볼 수 있듯이 부모인 parent div가 아닌, 조상인 body를 기준으로 top, bottom, right, left 값이 적용되는 것을 확인할 수 있습니다.

fixed, sticky

sticky와 position은 모두 스크롤할 때 요소를 고정시킬 수 있는 기능을 제공하는 공통점이 있지만 sticky 속성을 적용한 div는 스크롤을 계속 내리다가 부모 요소의 마지막까지 도달하면 해당 요소도 스크롤에 따라 움직이지만, fixed 속성을 적용한 div는 스크롤을 내려도 화면에서 사라지지 않고 항상 같은 위치에 있게 되는 차이점이 있습니다.