Gyinabea

Fa saa shorthand utilities yi di dwuma ma hyehyɛ element bi gyinabea ntɛmntɛm.

Nneɛma a wɔtaa de di dwuma

Wɔde adesua ahorow a ɛfa gyinabea a wɔde si hɔ ntɛmntɛm ho adesua ahorow wɔ hɔ, ɛwom sɛ ɛnyɛ nea ɛyɛ adwuma de.

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

Fixed soro

Fa element bi si viewport no atifi, fi ano kosi ano. Hwɛ hu sɛ wote nsunsuanso a ɛwɔ gyinabea a wɔahyɛ da ayɛ wɔ wo dwumadi no mu no ase; ebia ɛho behia sɛ wode CSS foforo ka ho.

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

Fixed ase

Fa element bi si viewport no ase, fi ano kosi ano. Hwɛ hu sɛ wote nsunsuanso a ɛwɔ gyinabea a wɔahyɛ da ayɛ wɔ wo dwumadi no mu no ase; ebia ɛho behia sɛ wode CSS foforo ka ho.

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

Ɔsoro a ɛyɛ nnam

Fa element bi si viewport no atifi, fi ano kosi ano, nanso bere a woatwe atwam no akyi nkutoo. .sticky-topUtility no de CSS's , position: stickya wɔmfa mmoa koraa wɔ browser ahorow nyinaa mu di dwuma.

IE11 ne IE10 bɛkyerɛ ase position: stickysɛ position: relative. Sɛnea ɛte no, yɛkyekyere styles no wɔ @supportsasɛmmisa bi mu, na yɛde stickiness no to browser ahorow a ebetumi akyerɛ ase yiye nkutoo so.

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