위치

요소의 위치를 빠르게 구성하려면 이러한 도우미를 사용하십시오.

이 페이지에서

고정 상단

가장자리에서 가장자리로 뷰포트 상단에 요소를 배치합니다. 프로젝트에서 고정 위치의 결과를 이해해야 합니다. CSS를 추가해야 할 수도 있습니다.

<div class="fixed-top">...</div>

고정 바닥

가장자리에서 가장자리로 뷰포트 하단에 요소를 배치합니다. 프로젝트에서 고정 위치의 결과를 이해해야 합니다. CSS를 추가해야 할 수도 있습니다.

<div class="fixed-bottom">...</div>

스티키 탑

가장자리에서 가장자리로 뷰포트 상단에 요소를 배치하되, 스크롤한 후에만 요소를 배치합니다.

<div class="sticky-top">...</div>

반응형 점착 탑

.sticky-top유용성 을 위해 반응 변형도 존재 합니다.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

끈적끈적한 바닥

가장자리에서 가장자리로 뷰포트의 맨 아래에 요소를 배치하되 스크롤한 후에만 요소를 배치합니다.

<div class="sticky-bottom">...</div>

반응성 끈적 끈적한 바닥

.sticky-bottom유용성 을 위해 반응 변형도 존재 합니다.

<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>