Posisyon

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

Sa pahinang ito

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.

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

Tumutugon na malagkit na tuktok

Umiiral din ang mga tumutugong variation para sa .sticky-toputility.

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

Malagkit sa ilalim

Iposisyon ang isang elemento sa ibaba ng viewport, mula sa gilid hanggang sa gilid, ngunit pagkatapos mong mag-scroll lampas dito.

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

Tumutugon malagkit na ibaba

Umiiral din ang mga tumutugong variation para sa .sticky-bottomutility.

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