Posisyon

Gamitin ang mga shorthand utility na ito para sa mabilis na pag-configure ng posisyon ng isang elemento.

Mga karaniwang halaga

Available ang mga mabilis na klase sa pagpoposisyon, kahit na hindi tumutugon ang mga ito.

<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>

Nakapirming tuktok

Iposisyon ang isang elemento sa tuktok ng viewport, mula sa gilid hanggang sa gilid. Tiyaking nauunawaan mo ang mga epekto ng nakapirming posisyon sa iyong proyekto; maaaring kailanganin mong magdagdag ng karagdagang CSS.

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

Nakapirming ibaba

Iposisyon ang isang elemento sa ibaba ng viewport, mula sa gilid hanggang sa gilid. Tiyaking nauunawaan mo ang mga epekto ng nakapirming posisyon sa iyong proyekto; maaaring kailanganin mong magdagdag ng karagdagang CSS.

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

Malagkit na tuktok

Iposisyon ang isang elemento sa tuktok ng viewport, mula sa gilid hanggang sa gilid, ngunit pagkatapos mo lang mag-scroll lampas dito. Gumagamit ang .sticky-toputility ng CSS's position: sticky, na hindi ganap na sinusuportahan sa lahat ng browser.

IE11 at IE10 ay magre-render position: stickybilang position: relative. Dahil dito, binabalot namin ang mga istilo sa isang @supportsquery, nililimitahan ang pagiging malagkit sa mga browser lamang na makakapag-render nito nang maayos.

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