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-top
utility ng CSS's position: sticky
, na hindi ganap na sinusuportahan sa lahat ng browser.
IE11 at IE10 ay magre-render position: sticky
bilang position: relative
. Dahil dito, binabalot namin ang mga istilo sa isang @supports
query, nililimitahan ang pagiging malagkit sa mga browser lamang na makakapag-render nito nang maayos.
<div class="sticky-top">...</div>