CSS로 요소 위치 지정하기: static, relative, absolute, fixed
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
CSS 초보자 및 웹 레이아웃 설계에 관심 있는 개발자.
핵심 요약
position: static
: 기본값이며,top
,right
,bottom
,left
속성을 사용할 수 없음.position: relative
: 요소의 위치를 조정할 수 있고, 절대 위치 요소의 기준이 됨.position: absolute
: 가까운 positioned 조상 요소 기준으로 절대 위치, 문서 흐름에서 제외됨.position: fixed
: 브라우저 창 기준으로 고정, 스크롤 시 위치 변화 없음.
섹션별 세부 요약
- Static Positioning
- 기본값이며,
top
,right
,bottom
,left
속성을 사용할 수 없음. - 문서 흐름에 영향을 주지 않음.
- 예시:
div { position: static; }
- Relative Positioning
top
,right
,bottom
,left
로 위치 조정 가능.- 문서 흐름에서 공간을 차지함.
- 절대 위치 요소의 기준이 됨.
- 예시:
.box { position: relative; top: 20px; left: 10px; }
- Absolute Positioning
- 가까운 positioned 조상 요소 기준으로 위치 지정.
- 문서 흐름에서 제외됨.
- 조상 요소가 없을 경우
요소 기준으로 위치.
- 예시:
.container { position: relative; }
와.box { position: absolute; top: 0; right: 0; }
- Fixed Positioning
- 브라우저 창 기준으로 고정됨.
- 스크롤 시 위치 변화 없음.
- 고정 헤더, 부유 버튼 등에 적합.
- 예시:
.header { position: fixed; top: 0; width: 100%; }
결론
relative
는 절대 위치 요소의 기준으로 사용하고,absolute
는 정밀한 위치 지정에 활용.fixed
는 스크롤 시 고정된 UI 요소(예: 헤더)에 적합.- Flexbox 또는 CSS Grid와 결합해 더 복잡한 레이아웃 구현 가능.