CSS Position 비교 데모

1. static (기본 위치)

문서 흐름에 따라 배치됩니다. top/left 등 이동 속성이 적용되지 않습니다.

2. relative (자기 자신의 위치를 기준으로 이동)

원래 위치를 기준으로 top/left 만큼 이동하지만, 원래 자리는 그대로 유지합니다.

3. absolute (가장 가까운 position 부모 기준)

문서 흐름에서 제거되며, relative/absolute/fixed/sticky 부모를 기준으로 배치됩니다.

4. fixed (화면에 고정)

스크롤과 상관없이 브라우저 화면에 고정됩니다.

오른쪽 아래의 보라색 박스를 보세요.

5. sticky (스크롤 시 특정 지점에서 고정)

스크롤을 내려보면 위의 주황색 박스(sticky)가 화면 상단에 붙습니다.