Frontend/CSS

CSS Layout 마스터: Position 속성 완벽 정리

미니임 2026. 2. 28. 20:32

 

웹 디자인에서 요소의 위치를 결정하는 position 속성은 레이아웃의 뼈대를 만드는 핵심 도구입니다. 각 속성의 특징과 실제 활용 사례를 통해 원리를 파악해 보겠습니다.

1. static (기본값)

모든 HTML 요소의 기본값입니다. 요소를 HTML 코드 순서대로 일반적인 문서 흐름(Normal Flow)에 따라 배치합니다.

  • 특징: top, bottom, left, right, z-index 속성이 무시됩니다.
  • 예시: 별도의 설정을 하지 않은 모든 div, p, h1 태그 등.
.box {
  position: static;
  /* 아래 속성들은 적용되지 않음 */
  top: 20px;
  left: 50px;
}

2. relative (상대 위치)

요소를 자신이 원래 있어야 할 위치를 기준으로 이동시킵니다.

  • 특징: 요소를 이동시켜도 원래 차지하던 공간은 그대로 유지됩니다. 따라서 주변 요소의 배치에 영향을 주지 않고 자신만 살짝 옮기고 싶을 때 유용합니다.
  • 주요 용도: absolute 자식 요소의 기준점(부모) 역할을 할 때 가장 많이 사용됩니다.

코드 예제

<div class="parent">
  <div class="box-relative">나의 원래 위치에서 이동합니다.</div>
</div>

.box-relative {
  position: relative;
  top: 20px;  /* 원래 위치에서 아래로 20px */
  left: 30px; /* 원래 위치에서 오른쪽으로 30px */
  background-color: #ffd700;
}

3. absolute (절대 위치)

가장 가까운 'Position이 설정된(static이 아닌)' 조상 요소를 기준으로 위치를 잡습니다.

  • 특징: 문서 흐름에서 완전히 제거되어 공중에 뜬 상태가 됩니다. 원래 차지하던 공간도 사라지므로 주변 요소들이 그 자리를 메우게 됩니다.
  • 주의사항: 조상 중 position이 설정된 요소가 없다면 브라우저 창(html 태그)을 기준으로 배치됩니다.

실전 예제: 이미지 위의 뱃지 만들기

<div class="card">
  <img src="product.jpg" alt="상품 이미지">
  <span class="badge">HOT</span>
</div>

.card {
  position: relative; /* 자식인 badge의 기준점이 됨 */
  width: 200px;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

4. fixed (고정 위치)

요소를 **뷰포트(브라우저 화면)**를 기준으로 고정합니다.

  • 특징: 페이지를 스크롤해도 항상 화면의 같은 위치에 남아 있습니다. absolute와 마찬가지로 문서 흐름에서 제외됩니다.
  • 주요 용도: 상단 네비게이션 바, 우측 하단의 'Top' 버튼, 팝업 배너 등.

예제: 화면 하단 고정 버튼

.top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #333;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

5. sticky (임계점 고정)

relative와 fixed의 특징을 동시에 가집니다. 일반적인 흐름에 있다가 스크롤이 특정 지점에 도달하면 화면에 고정됩니다.

  • 특징: 부모 요소 안에서만 갇혀서 고정됩니다. 부모 요소가 화면 밖으로 사라지면 sticky 요소도 함께 따라 올라갑니다.
  • 주요 용도: 표의 헤더(th), 리스트의 카테고리 제목 등.

예제: 스크롤 시 상단에 붙는 메뉴

.header-menu {
  position: sticky;
  top: 0; /* 스크롤이 상단 0에 닿는 순간 고정됨 */
  background-color: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

요약 및 비교표

속성기준점문서 흐름 차지 여부주요 특징

static 문서 흐름 Yes 기본값, 좌표 이동 불가
relative 본래 위치 Yes 자기 자신 기준 이동, 부모 기준점으로 활용
absolute 위치가 설정된 부모 No 부모를 기준으로 자유롭게 배치
fixed 브라우저 화면 No 스크롤과 무관하게 화면에 박제
sticky 부모 요소 내부 Yes 특정 스크롤 지점에서 고정

CSS Position 속성은 개념만 보면 간단해 보이지만, 실제 프로젝트에서 각 속성들이 어떻게 상호작용하는지 직접 코드를 작성해 보는 것이 중요합니다. 특히 relative 부모와 absolute 자식 관계를 완벽히 이해한다면 대부분의 복잡한 레이아웃을 구현할 수 있을 것입니다.

반응형