CSS에서 position 속성은 HTML 문서 상에서 요소(element)가 배치되는 방식을 결정합니다. 요소의 정확한 위치 지정을 위해서 `top`, `left`, `bottom`, `right` 속성과 함께 사용되기도 하지요.

이번 시간에는 CSS에서 position 속성 값으로 사용할 수 있는 `static`, `relative`, `absolute`, `fixed`, `sticky`에 대해서 함께 간단한 실습을 하면서 하나씩 정리해보겠습니다.

📺 동영상: https://youtu.be/PEyp9TBcZ-o

📝 포스팅: https://www.daleseo.com/css-position/

🧑‍💻 실습 코드:

• position-static: https://codepen.io/daleseo/pen/mdMdzob

• position-relative: https://codepen.io/daleseo/pen/qBXBJzg

• position-absolute: https://codepen.io/daleseo/pen/abybRra

• position-fixed: https://codepen.io/daleseo/pen/rNzNqXv

• position-sticky: https://codepen.io/daleseo/pen/LYjYgrg

CSS의 position 속성에 대해서 좀 더 공부하고 싶으시다면 아래 게시물도 참고해보세요 :)

📕 CSS의 fixed position을 통한 HTML 요소의 위치 고정: https://careerly.co.kr/comments/92417

📗 CSS의 fixed position으로 메뉴바 상단 고정하기 🔝: https://careerly.co.kr/comments/86578

📘 CSS의 absolute position 작동 메커니즘 이해: https://careerly.co.kr/comments/92417