기준 상자와 absolute

absolute 상자는 position이 static이 아닌 가장 가까운 조상을 기준 상자로 삼고, 그 상자의 안쪽 여백 바깥 가장자리에서 top · right 등을 잽니다. 그런 조상이 없으면 처음 화면을 기준 상자로 삼습니다.

레시피 카드 여섯 장의 그림 오른쪽 위마다 배지 '한식'을 겹치려면, 배지마다 제 카드에서 자리를 재야 합니다. 배지에 absolute만 주면 배지는 카드가 아니라 다른 상자에서 자리를 재, 여섯 배지가 한곳에 모일 수 있습니다. 이 레슨은 브라우저가 기준 상자를 어떻게 찾고, 그 상자의 어디에서 재는지 본 뒤 카드 그림 위 배지를 차례대로 씁니다.

그림 준비 중

1기준 상자는 나무를 따라 바깥으로 찾는다

<li class="recipe-card">
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
    <span class="badge">
      한식
    </span>
  </div>
</li>

.recipe-card {
  position: relative;
  width: 200px;
  padding: 16px;
  border: 1px solid #d2d2d7;
}

.recipe-card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

브라우저는 배지에서 요소 나무를 따라 바깥으로 한 칸씩 올라가며 기준 상자를 찾습니다(브라우저 규칙 2).

1. 바로 위 부모 .recipe-card-head는 position이 처음 값 static이라 지나갑니다.
2. 그 바깥 .recipe-card는 relative라 여기서 멈춥니다. 카드가 배지의 기준 상자입니다.

기준 상자는 부모가 아니라 'static이 아닌 가장 가까운 조상'입니다. 기준 상자는 자료에 따라 컨테이닝 블록(containing block)이라고도 부릅니다. 끝까지 올라가도 그런 조상이 없으면 처음 화면(페이지를 열었을 때 창에 보이는 첫 화면 크기의 상자)을 기준으로 삼습니다. 카드의 relative는 카드를 옮기지 않고(top이 없다), 기준 상자로 삼는 일만 합니다.

배지의 마크업은 여는 태그 뒤에서 줄을 나눴습니다. absolute가 된 배지는 블록처럼 그려져, 안의 앞뒤 빈칸이 줄 끝에 닿아 그려지지 않습니다(브라우저 규칙 2) — 한 줄로 쓴 배지와 너비가 같습니다.

2안쪽 여백 바깥 가장자리에서 잰다

일반 흐름과 position에서 세운 규칙에 문장을 잇습니다.

브라우저 규칙 8. top · left 등을 적으면 기준 상자의 안쪽 여백 바깥 가장자리에서 재어 놓입니다.

1절 카드에서 배지의 top · right를 0으로 바꿔 페이지에서 잽니다.

<li class="recipe-card">
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
    <span class="badge">
      한식
    </span>
  </div>
</li>

.recipe-card {
  position: relative;
  width: 200px;
  padding: 16px;
  border: 1px solid #d2d2d7;
}

.recipe-card .badge {
  position: absolute;
  top: 0;
  right: 0;
}

카드 테두리 위는 페이지에서 8, 배지 위는 9입니다. 오른쪽도 카드 끝 242에서 1 들어간 241입니다. 차이 1은 카드 테두리 굵기입니다. 0만큼 떨어진 배지는 테두리 안쪽 선에 붙고, 안쪽 여백 16은 건너뛰어 그 안까지 들어갑니다. 안쪽 여백 바깥 가장자리는 곧 테두리 안쪽 선이라, 네 방향 속성은 모두 그 선에서 잽니다.

예제

카드 그림 위에 배지 겹치기 — 하위 목표 넷

카드 그림 오른쪽 위 모서리에서 8px 안쪽에 배지를 겹칩니다. 겹치기는 늘 같은 차례로 씁니다 — 1. 기준 상자 정하기 → 2. 겹칠 상자 빼기 → 3. 자리 정하기 → 4. 쌓는 차례.

<li class="recipe-card">
  <img
    src="images/tteokbokki.svg"
    alt=""
    width="200"
    height="150"
  />
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
    <span class="badge">
      한식
    </span>
  </div>
</li>

.recipe-card {
  width: 200px;
  padding: 16px;
  border: 1px solid #d2d2d7;
}

/* 1. 기준 상자 정하기 */
.recipe-card {
  position: relative;
}

카드 그림의 alt=""는 카드 제목이 같은 이름을 말하기 때문입니다. 배지가 잴 바탕을 먼저 카드로 정합니다. 카드 자신은 움직이지 않습니다.

/* 2. 겹칠 상자 빼기 */
.recipe-card .badge {
  position: absolute;
  background-color: #ffffff;
}

배지가 흐름에서 빠졌습니다. 아직 top 등이 없어 원래 자리(제목 아래 줄)에 떠 있습니다.

/* 3. 자리 정하기 */
.recipe-card .badge {
  top: 24px;
  right: 24px;
}

그림은 카드 테두리 안쪽에서 안쪽 여백 16만큼 들어가 있습니다. 그래서 그림 모서리에서 8 안쪽에 두려면 16 + 8 = 24를 적습니다. 잰 값에서도 배지 위(33)는 그림 위(25)보다 8 아래, 배지 오른쪽 끝(217)은 그림 오른쪽 끝(225)보다 8 안쪽입니다.

4. 쌓는 차례는 확인입니다. position을 준 배지는 흐름 안의 그림보다 위에 그려집니다. 배지 가운데의 맨 위 요소가 배지 자신이라 그림에 가리지 않았습니다. 겹친 두 상자가 모두 position을 가졌을 때 차례를 정하는 z-index는 다음 레슨 sticky 머리글과 z-index에서 씁니다.

자주 틀리는 곳

틀린 생각: absolute는 부모 상자를 기준으로 한다.

<li class="recipe-card">
  <h2>떡볶이</h2>
  <span class="badge">한식</span>
</li>
<li class="recipe-card">
  <h2>잡채</h2>
  <span class="badge">한식</span>
</li>

.recipe-card {
  width: 200px;
  padding: 16px;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

카드에 position이 없어 배지가 나무 끝까지 올라가도 기준 상자를 찾지 못했습니다. 두 배지 모두 처음 화면에서 재어 페이지 위 8 · 오른쪽 8 한곳에 겹칩니다. 카드가 여섯 장이면 배지 여섯이 그 자리에 쌓입니다. 부모인 카드는 기준 상자가 아닙니다 — 부모 기준이라는 생각입니다.

맞는 규칙: absolute의 기준 상자는 position이 static이 아닌 가장 가까운 조상입니다. 카드마다 재게 하려면 카드에 position: relative를 줍니다.

틀린 생각: 배지 규칙은 .badge 하나로 쓰면 된다.

<p class="meta">
  <span class="badge">한식</span>
  조리 15분
</p>

.badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

카드 배지를 겹치려고 쓴 규칙이 상세 페이지의 '한식 조리 15분' 줄에도 닿았습니다. 이 배지는 카드 밖이라 기준 상자가 없어, 글 줄을 떠나 페이지 오른쪽 위로 갔습니다.

맞는 규칙: 겹칠 배지만 고릅니다. .recipe-card .badge처럼 카드 안의 배지만 고르는 선택자로 씁니다(브라우저 규칙 4).

틀린 생각: 기준 상자에도 absolute를 주면 된다.

<li class="recipe-card">
  떡볶이
</li>
<li class="recipe-card">
  잡채
</li>

li:first-child {
  position: absolute;
}

첫 카드를 absolute로 하면 기준 상자는 되지만 카드 자신이 흐름에서 빠집니다. 뒤 카드가 올라와 두 카드가 같은 자리 8에 겹칩니다(브라우저 규칙 8).

맞는 규칙: 기준 상자에는 흐름에 남는 relative를 줍니다. absolute는 겹칠 상자에만 줍니다.

확인 문제

1. 예제의 '1. 기준 상자 정하기' 규칙에서 선택자 .recipe-card를 .recipe-card-head로 바꿨습니다. 배지는 어디에 놓일까요?

<li class="recipe-card">
  <img
    src="images/tteokbokki.svg"
    alt=""
    width="200"
    height="150"
  />
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
    <span class="badge">
      한식
    </span>
  </div>
</li>

.recipe-card {
  width: 200px;
  padding: 16px;
}

/* 1. 기준 상자 정하기 */
.recipe-card-head {
  position: relative;
}

.recipe-card .badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

• ① 그림 오른쪽 위 그대로
• ② 제목 묶음에서 잰 자리 — 그림 아래 제목 옆
• ③ 페이지 오른쪽 위

<li class="recipe-card">
  <img
    src="images/tteokbokki.svg"
    alt=""
    width="200"
    height="150"
  />
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
    <span class="badge">
      한식
    </span>
  </div>
</li>

.recipe-card {
  width: 200px;
  padding: 16px;
}

/* 1. 기준 상자 정하기 */
. {
  position: relative;
}

.recipe-card .badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

2. 겹치기 하위 목표 넷 가운데 하나가 비었습니다. ____ 자리에 들어갈 규칙을 통째로 쓰세요.

/* 1. 기준 상자 정하기 */
____

/* 2. 겹칠 상자 빼기 */
/* 3. 자리 정하기 */
.recipe-card .badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

/* 1. 기준 상자 정하기 */
.recipe-card {
  position: relative;
}

3. 여행 일정 페이지입니다. 꼬리표 '맑음'(.tag)의 기준 상자는 어느 요소일까요?

<section class="trip">
  <ul class="days">
    <li class="day">
      1일차 바다
      <span class="tag">
        맑음
      </span>
    </li>
  </ul>
</section>

.trip {
  position: relative;
}

.days {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  position: absolute;
  top: 0;
  right: 0;
}

• ① li.day
• ② ul.days
• ③ section.trip

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS(이어 쓴 규칙까지)를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). '1. 기준 상자 정하기' 규칙을 지우면 배지가 어디로 갈지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 창 폭을 바꿔 보면 배지가 무엇을 따라 움직이는지도 보입니다.