in English
위치
요소의 위치를 빠르게 구성하려면 이러한 약식 유틸리티를 사용하십시오.
공통 가치
빠른 포지셔닝 클래스는 응답하지 않지만 사용할 수 있습니다.
<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-top
CSS 를 사용합니다.position: sticky
IE11 및 IE10은 로 렌더링 position: sticky
됩니다 position: relative
. 따라서 스타일을 @supports
쿼리에 래핑하여 적절하게 렌더링할 수 있는 브라우저로만 고정성을 제한합니다.
<div class="sticky-top">...</div>