Tailwind CSS Position 속성 가이드

KUKJIN LEE • 4개월 전 작성

Tailwind CSS Position 유틸리티 클래스 종류

Tailwind CSS에서는 HTML 요소에 위치 지정 속성을 쉽게 적용할 수 있도록 다음과 같은 position 유틸리티 클래스를 제공합니다.

static: 요소를 문서의 일반적인 흐름에 따라 배치합니다. 기본적으로 모든 요소는 `static`위치를 사용합니다.
relative: 요소를 일반적인 위치에서 상대적으로 배치합니다. `top`, `right`, `bottom`, `left` 사용하여 이동시킬 수 있습니다.
absolute: 가장 가까운 조상 요소 중 `relative`, `absolute`, `fixed`, `sticky` 위치를 가진 요소를 기준으로 요소를 배치합니다.
fixed: 요소를 브라우저 창을 기준으로 고정하여 배치합니다. 스크롤을 해도 위치가 고정되어 변경되지 않습니다.
sticky: 요소가 일반적인 흐름에 따라 배치되다가 스크롤할 때 특정 위치에 고정되도록 합니다. 보통 스크롤 위치에서 고정되는 헤더 등에 사용됩니다.

<footer className="fixed bottom-0 w-full bg-gray-800 text-white p-4">
  고정된 푸터입니다.
</footer>

fixed를 사용하여 푸터를 페이지의 하단에 고정합니다.

<div className="absolute top-4 right-4 bg-blue-500 text-white p-2">
  중요한 알림 배너
</div>

absolute를 사용하여 페이지의 오른쪽 위에 배너를 고정합니다. top-4와 right-4 클래스는 요소를 상단에서 1rem, 오른쪽에서 1rem 떨어지도록 설정합니다.

<header class="sticky top-0 bg-white shadow-md p-4">
  스크롤 시 고정되는 헤더입니다.
</header>

sticky를 사용하여 사용자가 스크롤할 때 헤더가 화면의 상단에 고정되도록 합니다.