position은 문서 상에 어떠한 요소를 배치하는데 사용한다
position: static
position을 따로 설정하지 않으면 설정되는 기본 속성이다
요소들이 html에 작성된 순으로 브라우저에 나타남
static 속성은 top, bottom, left, right가 적용되지 않음
position: relative
요소를 원래의 위치에서 벗어나서 배치할 수 있게 해줌
즉 원래의 위치를 기준으로 상대적으로 위치시켜줌
position: absolute
자신의 상위 요소(부모라고 함)를 배치기준으로 삼음
DOM트리를 따라서 position이 static인 것을 제외한 상위요소를 기준으로 삼으며, 만약 position이 static이 아닌 상위요소가 없다면 body가 기준이 됨.
부모 요소(가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야함
따라서 어떤 요소의 display 속성을 absolute로 설정하면 부모 요소의 display 속성을 relative로 지정해주는 것이 관례.
position: fixed
요소를 항상 고정된 위치에 배치할 수 있음
viewport(브라우저 전체화면)을 기준으로 함
position: sticky
최근에 업데이트 된 속성
스티키헤더 등을 만들 때 사용함
말 그대도 스티키하게 고정되어 브라우저를 스크롤할 때 한 자리에 고정되어있다
스티키 헤더 등을 검색해보면 쉽게 이해할 수 있는 속성이다
참고
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://www.daleseo.com/css-position/
