Position

​Basic usage

​요소를 정적으로 배치하기

static 유틸리티를 사용하면 요소를 문서의 일반적인 흐름에 따라 배치할 수 있습니다.

오프셋은 무시되며, 절대적으로 배치된 자식 요소의 위치 기준으로 작용하지 않습니다.

<div class="static ...">
  <p>Static parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

​상대적 위치 지정

relative 유틸리티를 사용해 엘리먼트를 문서의 일반적인 흐름에 따라 위치시킬 수 있습니다.

오프셋은 엘리먼트의 일반적인 위치를 기준으로 계산되며, 이 엘리먼트는 절대적으로 위치가 지정된 자식 엘리먼트의 위치 기준으로 작동합니다.

<div class="relative ...">
  <p>상대적 부모</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>절대적 자식</p>
  </div>
</div>

​엘리먼트를 절대적으로 배치하기

absolute 유틸리티를 사용하면 엘리먼트를 문서의 일반적인 흐름 밖에 배치할 수 있습니다. 이렇게 하면 주변 엘리먼트들이 해당 엘리먼트가 존재하지 않는 것처럼 동작합니다.

모든 오프셋은 static이 아닌 위치를 가진 가장 가까운 부모를 기준으로 계산되며, 이 엘리먼트는 다른 절대적으로 배치된 자식 엘리먼트들의 위치 기준으로 작용합니다.

<div class="static ...">
  <!-- 정적 부모 -->
  <div class="static ..."><p>정적 자식</p></div>
  <div class="inline-block ..."><p>정적 형제</p></div>
  <!-- 정적 부모 -->
  <div class="absolute ..."><p>절대적 자식</p></div>
  <div class="inline-block ..."><p>정적 형제</p></div>
</div>

​고정 위치 엘리먼트

fixed 유틸리티를 사용해 엘리먼트를 브라우저 윈도우를 기준으로 위치시킬 수 있습니다.

모든 오프셋은 뷰포트를 기준으로 계산되며, 이 엘리먼트는 절대 위치(absolute)로 지정된 자식 엘리먼트의 위치 기준점으로 작동합니다.

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div class="relative">
  <div class="fixed top-0 left-0 right-0">Contacts</div>
  <div>
    <div>
      <img src="..." />
      <strong>Andrew Alfred</strong>
    </div>
    <div>
      <img src="..." />
      <strong>Debra Houston</strong>
    </div>
    <!-- ... -->
  </div>
</div>

​스틱키 고정 엘리먼트

sticky 유틸리티를 사용하면 엘리먼트를 특정 임계값을 넘을 때까지 relative로 위치시키고, 그 이후에는 부모 엘리먼트가 화면에서 벗어날 때까지 fixed로 고정시킬 수 있습니다.

모든 오프셋은 엘리먼트의 일반적인 위치를 기준으로 계산되며, 엘리먼트는 절대 위치가 지정된 자식 엘리먼트의 위치 참조로 작동합니다.

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<div>
  <div>
    <div class="sticky top-0 ...">A</div>
    <div>
      <div>
        <img src="..." />
        <strong>Andrew Alfred</strong>
      </div>
      <div>
        <img src="..." />
        <strong>Aisha Houston</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <div>
    <div class="sticky top-0">B</div>
    <div>
      <div>
        <img src="..." />
        <strong>Bob Alfred</strong>
      </div>
      <!-- ... -->
    </div>
  </div>
  <!-- ... -->
</div>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:absolute 를 사용하면 absolute 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="relative hover:absolute">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:absolute를 사용하면 중간 화면 크기 이상에서만 absolute 유틸리티를 적용할 수 있습니다.

<div class="relative md:absolute">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.