position

position

position 유틸리티는 요소를 문서 흐름(flow) 안에서 어떤 방식으로 배치할지를 결정해 줘요. static, relative, absolute, fixed, sticky를 지원해요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

요소를 static으로 배치하기 (Statically positioning elements)

static 유틸리티를 사용하면 요소를 문서의 일반적인 흐름(normal flow)에 따라 배치할 수 있어요:

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

static으로 배치된 요소는 offset(위치 이동) 값이 무시되고, absolute로 배치된 자식 요소의 위치 기준점(position reference) 역할도 하지 못해요.

요소를 relative로 배치하기 (Relatively positioning elements)

relative 유틸리티를 사용하면 요소를 문서의 일반적인 흐름에 따라 배치할 수 있어요:

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

relative로 배치된 요소는 offset이 요소의 일반적인 위치를 기준으로 계산되고, absolute로 배치된 자식 요소의 위치 기준점이 돼요.

요소를 absolute로 배치하기 (Absolutely positioning elements)

absolute 유틸리티를 사용하면 요소를 문서의 일반적인 흐름 밖으로 배치해서, 주변 요소들이 마치 그 요소가 없는 것처럼 동작하게 할 수 있어요:

<div class="static ...">
  <!-- Static parent -->
  <div class="static ..."><p>Static child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>

  <!-- Static parent -->
  <div class="absolute ..."><p>Absolute child</p></div>
  <div class="inline-block ..."><p>Static sibling</p></div>
</div>

absolute로 배치된 요소는 offset이 static이 아닌 위치를 가진 가장 가까운 부모를 기준으로 계산되고, 다른 absolute 자식 요소들의 위치 기준점 역할을 해요.

요소를 fixed로 배치하기 (Fixed positioning elements)

fixed 유틸리티를 사용하면 요소를 브라우저 창(viewport)을 기준으로 배치할 수 있어요:

이 요소를 스크롤하면 fixed 포지셔닝이 동작하는 것을 확인할 수 있어요.

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

fixed로 배치된 요소는 offset이 viewport(뷰포트)를 기준으로 계산되고, absolute 자식 요소들의 위치 기준점 역할을 해요.

요소를 sticky로 배치하기 (Sticky positioning elements)

sticky 유틸리티를 사용하면 요소가 특정 임계값을 넘기기 전까지는 relative처럼 동작하고, 임계값을 넘긴 다음부터는 부모가 화면 밖으로 나갈 때까지 fixed처럼 동작해요:

이 요소를 스크롤하면 sticky 포지셔닝이 동작하는 것을 확인할 수 있어요.

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

sticky로 배치된 요소는 offset이 요소의 일반적인 위치를 기준으로 계산되고, absolute 자식 요소들의 위치 기준점 역할을 해요.

반응형 디자인 (Responsive design)

position 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

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

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.