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-top
Utility no de CSS's , position: sticky
a wɔmfa mmoa koraa wɔ browser ahorow nyinaa mu di dwuma.
IE11 ne IE10 bɛkyerɛ ase position: sticky
sɛ position: relative
. Sɛnea ɛte no, yɛkyekyere style ahorow no wɔ @supports
asɛmmisa bi mu, na yɛde stickiness no to browser ahorow a ebetumi akyerɛ ase yiye nkutoo so.
<div class="sticky-top">...</div>