레이아웃
position
문서 내에서 엘리먼트의 위치를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
예제
정적 위치 지정 엘리먼트
static 유틸리티를 사용해 엘리먼트를 문서의 일반적인 흐름에 따라 위치시킬 수 있습니다:
Static parent
Absolute child
<div class="static ..."> <p>Static parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>정적 위치 지정 엘리먼트는 오프셋이 무시되며, 절대 위치 지정된 자식 엘리먼트의 위치 기준이 되지 않습니다.
상대적으로 엘리먼트 위치 지정하기
relative 유틸리티를 사용해 엘리먼트를 문서의 일반적인 흐름에 따라 위치시킬 수 있습니다:
Relative parent
Absolute child
<div class="relative ..."> <p>Relative parent</p> <div class="absolute bottom-0 left-0 ..."> <p>Absolute child</p> </div></div>상대적으로 위치가 지정된 엘리먼트는 오프셋이 엘리먼트의 일반적인 위치를 기준으로 계산되며, 절대적으로 위치가 지정된 자식 엘리먼트의 위치 기준점으로 작용합니다.
엘리먼트를 절대적으로 배치하기
absolute 유틸리티를 사용하면 엘리먼트를 문서의 일반적인 흐름에서 벗어나게 배치할 수 있습니다. 이렇게 하면 주변 엘리먼트들이 해당 엘리먼트가 존재하지 않는 것처럼 동작합니다.
정적(static) 배치 사용 시
상대적(relative) 부모
정적(static) 부모
정적(static) 자식?
정적(static) 형제
절대적(absolute) 배치 사용 시
상대적(relative) 부모
정적(static) 부모
절대적(absolute) 자식
정적(static) 형제
<div class="static ..."> <!-- 정적(static) 부모 --> <div class="static ..."><p>정적(static) 자식</p></div> <div class="inline-block ..."><p>정적(static) 형제</p></div> <!-- 정적(static) 부모 --> <div class="absolute ..."><p>절대적(absolute) 자식</p></div> <div class="inline-block ..."><p>정적(static) 형제</p></div></div>절대적으로 배치된 엘리먼트는 static이 아닌 다른 배치 속성을 가진 가장 가까운 부모를 기준으로 오프셋이 계산됩니다. 또한, 이 엘리먼트는 다른 절대적으로 배치된 자식 엘리먼트들의 위치 기준점으로 작용합니다.
고정 위치 엘리먼트
fixed 유틸리티를 사용해 엘리먼트를 브라우저 윈도우를 기준으로 위치시킬 수 있습니다:
이 엘리먼트를 스크롤해 고정 위치가 어떻게 동작하는지 확인하세요
Andrew Alfred
Debra Houston
Jane White
Ray Flint
Mindy Albrect
David Arnold<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>고정 위치 엘리먼트는 오프셋이 뷰포트를 기준으로 계산되며, 절대 위치를 가진 자식 엘리먼트의 위치 기준이 됩니다.
스틱키 고정 엘리먼트
sticky 유틸리티를 사용하면 엘리먼트가 특정 임계값을 넘을 때까지 relative로 위치하다가, 그 이후에는 부모 엘리먼트가 화면에서 벗어날 때까지 fixed로 고정됩니다.
이 엘리먼트를 스크롤하여 스틱키 고정이 작동하는 모습을 확인하세요
Andrew AlfredAisha HoustonAnna WhiteAndy FlintBob AlfredBianca HoustonBrianna WhiteBert FlintColton AlfredCynthia HoustonCheyenne WhiteCharlie Flint<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>스틱키로 고정된 엘리먼트는 오프셋이 엘리먼트의 일반적인 위치를 기준으로 계산되며, 절대적으로 위치가 지정된 자식 엘리먼트의 기준점 역할을 합니다.
반응형 디자인
접두사 a position 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="relative md:absolute ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
