AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

CSS로 요소 위치 지정하기: static, relative, absolute, fixed

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

CSS 초보자 및 웹 레이아웃 설계에 관심 있는 개발자.

핵심 요약

  • position: static : 기본값이며, top, right, bottom, left 속성을 사용할 수 없음.
  • position: relative : 요소의 위치를 조정할 수 있고, 절대 위치 요소의 기준이 됨.
  • position: absolute : 가까운 positioned 조상 요소 기준으로 절대 위치, 문서 흐름에서 제외됨.
  • position: fixed : 브라우저 창 기준으로 고정, 스크롤 시 위치 변화 없음.

섹션별 세부 요약

  1. Static Positioning
  • 기본값이며, top, right, bottom, left 속성을 사용할 수 없음.
  • 문서 흐름에 영향을 주지 않음.
  • 예시: div { position: static; }
  1. Relative Positioning
  • top, right, bottom, left로 위치 조정 가능.
  • 문서 흐름에서 공간을 차지함.
  • 절대 위치 요소의 기준이 됨.
  • 예시: .box { position: relative; top: 20px; left: 10px; }
  1. Absolute Positioning
  • 가까운 positioned 조상 요소 기준으로 위치 지정.
  • 문서 흐름에서 제외됨.
  • 조상 요소가 없을 경우 요소 기준으로 위치.
  • 예시: .container { position: relative; }.box { position: absolute; top: 0; right: 0; }
  1. Fixed Positioning
  • 브라우저 창 기준으로 고정됨.
  • 스크롤 시 위치 변화 없음.
  • 고정 헤더, 부유 버튼 등에 적합.
  • 예시: .header { position: fixed; top: 0; width: 100%; }

결론

  • relative는 절대 위치 요소의 기준으로 사용하고, absolute는 정밀한 위치 지정에 활용.
  • fixed는 스크롤 시 고정된 UI 요소(예: 헤더)에 적합.
  • Flexbox 또는 CSS Grid와 결합해 더 복잡한 레이아웃 구현 가능.