CSS position 정리

CSS의 위치 설정을 위한 position 속성은 MDN Web Docs의 position과 W3Schools의 CSS Layout - The position Property에 자세히 정리되어 있다.

---

Position 기초 정리

1. static
   • 웹사이트의 기본 속성값, left/right/top/bottom 등 위치 속성은 무시됨
2. relative
   • 해당 HTML 태그가 있는 위치에서 left/right/top/bottom값을 통해 움직임
3. absolute
   • 부모 영역에서 left/right/top/bottom을 이용해 주어진 위치로 움직임

   Info

   부모 태그의 position 속성이 relative, absolute, fixed 중 하나여야 함. 만약 부모 태그가 해당 속성을 가지고 있지 않다면 상위 요소를 기준으로 하고, 최종적으로는 body 태그를 기준으로 함¹

4. fixed
   • absolute와 비슷하지만 스크롤을 내려도 그 위치에 고정됨
   • viewport(웹 브라우저 윈도우)를 기준으로 함
5. Sticky
   • relative와 비슷하지만 스크롤을 내리면 fixed처럼 그 위치에 고정됨

---

1. body 태그는 relative를 기본 속성으로 가지고 있음 ↩