position

흐름에서 꺼내 놓기

지금까지 요소는 문서의 흐름을 따라 놓였습니다. Flexbox 와 Grid 도 그 흐름 안에서 자리를 나눈 것입니다.

position 은 그 흐름에서 요소를 꺼내어 원하는 자리에 둡니다. 겹쳐 놓아야 하는 것 — 알림 배지, 닫기 단추, 떠 있는 차림표 — 에 사용합니다.

배치의 기본 수단이 아닙니다. 화면 골격은 Grid 와 Flexbox 로 잡고, 그 위에 무언가를 겹쳐야 할 때만 사용합니다.

relative 와 absolute

이 둘은 짝으로 사용합니다. 부모에 relative 를 주고 자식에 absolute 를 주면, 자식이 그 부모를 기준으로 놓입니다.

<div class="card">
  <span class="badge">새 글</span>
  <h4>휴관 안내</h4>
  <p>다음 주 월요일은 쉽니다.</p>
</div>

.card {
  /* 이 줄이 기준을 만듭니다. 지우고 다시 그려 보십시오. */
  position: relative;

  border: 1px solid #d9cff7;
  border-radius: 8px;
  padding: 16px;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;

  background: #6e56cf;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

relative 를 지우면 배지가 화면 오른쪽 위로 날아갑니다. 기준이 될 조상을 찾지 못해 화면 전체를 기준으로 삼기 때문입니다.

다섯 가지 값

relative 는 자리를 그대로 둡니다. 10px 옮겨도 원래 자리는 비어 있습니다. absolute 는 흐름에서 빠져 뒤 요소가 그 자리를 메웁니다.

sticky — 스크롤하면 붙습니다

표의 머리 줄이나 화면 위 차림표에 사용합니다. 미리보기 안을 스크롤해 보십시오.

<div class="scroll">
  <div class="bar">위에 붙는 줄</div>
  <p>내용 1</p>
  <p>내용 2</p>
  <p>내용 3</p>
  <p>내용 4</p>
  <p>내용 5</p>
  <p>내용 6</p>
</div>

.scroll {
  height: 180px;
  overflow: auto;
  border: 1px solid #dee2e6;
}

.bar {
  position: sticky;
  top: 0;   /* 어디에 닿으면 붙을지 반드시 적습니다 */

  background: #6e56cf;
  color: #fff;
  padding: 8px 12px;
}

top 을 빠뜨리면 아무 일도 일어나지 않습니다. 어디에 닿았을 때 붙을지 모르기 때문입니다. sticky 가 안 듣는 일의 대부분이 이것입니다.

세 가지

• 기준이 될 부모에 relative 를 빠뜨립니다. absolute 요소가 화면 구석으로 날아갑니다. 기준을 만드는 것은 부모의 몫입니다.
• sticky 에 top 을 빠뜨립니다. 붙지 않습니다. 부모에 overflow: hidden 이 있어도 듣지 않습니다.
• 배치를 absolute 로 합니다. 흐름에서 빠지므로 부모의 높이가 0 이 되고, 화면 폭이 바뀌면 겹칩니다. 배치는 Grid 와 Flexbox 입니다.

직접 해보기

정리

• relative 는 자리를 그대로 두고, absolute 는 흐름에서 빠집니다.
• absolute 의 기준은 가장 가까운 static 이 아닌 조상입니다.
• sticky 는 top 등을 함께 적어야 붙습니다.
• 배치의 기본은 Grid 와 Flexbox 입니다. position 은 겹칠 때만 사용합니다.