Posisyon

Gamita kini nga mga katabang alang sa dali nga pag-configure sa posisyon sa usa ka elemento.

Niini nga panid

Giayo nga tumoy

Ibutang ang usa ka elemento sa ibabaw sa viewport, gikan sa ngilit ngadto sa ngilit. Siguroha nga imong nasabtan ang mga sangputanan sa natudlong posisyon sa imong proyekto; tingali kinahanglan nimong idugang ang dugang nga CSS.

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

Giayo nga ubos

Ibutang ang usa ka elemento sa ubos sa viewport, gikan sa ngilit ngadto sa ngilit. Siguroha nga imong nasabtan ang mga sangputanan sa natudlong posisyon sa imong proyekto; tingali kinahanglan nimong idugang ang dugang nga CSS.

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

Malagkit nga ibabaw

Ibutang ang usa ka elemento sa ibabaw sa viewport, gikan sa ngilit ngadto sa ngilit, apan human lang nimo ma-scroll kini.

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

Responsive nga sticky top

Ang mga responsive nga mga kalainan anaa usab alang 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 nga ubos

Ibutang ang usa ka elemento sa ubos sa viewport, gikan sa ngilit ngadto sa ngilit, apan human lang nimo kini i-scroll sa ibabaw niini.

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

Responsive sticky nga ubos

Ang mga responsive nga mga kalainan anaa usab alang 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>