Position 속성

자유로운 배치의 핵심

​웹 요소를 원하는 위치에 배치할 때 가장 중요한 속성이 바로 position입니다. relative, absolute, fixed, sticky를 적절히 활용하면 복잡한 레이아웃도 손쉽게 구현할 수 있습니다.

주요 속성 정리

1. relative: 자기 자신의 원래 위치를 기준으로 이동

2. absolute: 부모 중 position이 설정된 요소를 기준으로 배치

3. fixed: 브라우저 화면을 기준으로 고정 (예: 상단 네비게이션)

4. sticky: 스크롤 시 특정 지점에서 고정

예시 – 고정 네비게이션

nav {  position: sticky;  top: 0;  background: white;}