위치

요소의 위치를 ​​빠르게 구성하려면 이러한 약식 유틸리티를 사용하십시오.

공통 가치

응답하지 않는 빠른 위치 지정 클래스를 사용할 수 있습니다.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

고정 상단

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

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

고정 바닥

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

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

스티키 탑

가장자리에서 가장자리로 뷰포트 상단에 요소를 배치하되, 스크롤한 후에만 요소를 배치합니다. 이 유틸리티는 모든 브라우저에서 완전히 지원되지 않는 .sticky-topCSS 를 사용합니다.position: sticky

IE11 및 IE10은 로 렌더링 position: sticky됩니다 position: relative. 따라서 @supports쿼리에 스타일을 래핑하여 적절하게 렌더링할 수 있는 브라우저로만 고정성을 제한합니다.

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