Position

Position (위치)

요소의 위치를 빠르게 구성하는 축약(position shorthand) 유틸리티에 대해 알아봅니다.

출처: 문서

본문

위치 값 (Position values)

빠른 위치 지정 클래스가 제공되지만 반응형은 아닙니다.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

요소 배치 (Arrange elements)

가장자리 위치(edge positioning) 유틸리티로 요소를 쉽게 배치할 수 있습니다. 형식은 {property}-{position}입니다.

여기서 property는 다음 중 하나입니다.

• top - 세로 위쪽 위치
• start - 가로 왼쪽 위치 (LTR에서)
• bottom - 세로 아래쪽 위치
• end - 가로 오른쪽 위치 (LTR에서)

여기서 position은 다음 중 하나입니다.

• 0 - 0 가장자리 위치
• 50 - 50% 가장자리 위치
• 100 - 100% 가장자리 위치

($position-values Sass map 변수에 항목을 추가하면 더 많은 position 값을 추가할 수 있습니다.)

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

요소 가운데 정렬 (Center elements)

추가로, transform 유틸리티 클래스 .translate-middle로 요소를 가운데 정렬할 수도 있습니다.

이 클래스는 요소에 translateX(-50%)와 translateY(-50%) 변환을 적용하며, 이를 가장자리 위치 유틸리티와 조합하면 요소를 완전히 가운데에 놓을 수 있습니다.

<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

.translate-middle-x 또는 .translate-middle-y 클래스를 추가하면 요소를 가로 또는 세로 방향으로만 위치시킬 수 있습니다.

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

예시 (Examples)

이 클래스들의 실제 사용 예시입니다.

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

이 클래스들을 기존 컴포넌트와 함께 사용해 새 컴포넌트를 만들 수 있습니다. $position-values 변수에 항목을 추가해 기능을 확장할 수 있다는 점을 기억하세요.

<div class="position-relative m-4">
  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

CSS

Sass map

기본 position 유틸리티 값은 Sass map에 선언된 뒤 유틸리티를 생성하는 데 사용됩니다.

scss/_variables.scss

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

Sass utilities API

position 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"position": (
  property: position,
  values: static relative absolute fixed sticky
),
"top": (
  property: top,
  values: $position-values
),
"bottom": (
  property: bottom,
  values: $position-values
),
"start": (
  property: left,
  class: start,
  values: $position-values
),
"end": (
  property: right,
  class: end,
  values: $position-values
),
"translate-middle": (
  property: transform,
  class: translate-middle,
  values: (
    null: translate(-50%, -50%),
    x: translateX(-50%),
    y: translateY(-50%),
  )
),

더 알아보기 (Learn more)

• Bootstrap 문서