Isikhundla
Sebenzisa lezi zinsiza ze-shorthand ukuze ulungiselele ngokushesha indawo yento.
Amanani ajwayelekile
Amakilasi okubeka ngokushesha ayatholakala, nakuba engaphenduli.
<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>
Ingaphezulu elilungisiwe
Misa i-elementi phezulu kwembobo yokubuka, ukusuka onqenqemeni ukuya onqenqemeni. Qiniseka ukuthi uyakuqonda ukubaluleka kwesimo esigxilile kuphrojekthi yakho; ungase udinge ukwengeza i-CSS eyengeziwe.
<div class="fixed-top">...</div>
Kulungiswe phansi
Misa i-elementi ezansi kwembobo yokubuka, ukusuka onqenqemeni ukuya onqenqemeni. Qiniseka ukuthi uyakuqonda ukubaluleka kwesimo esigxilile kuphrojekthi yakho; ungase udinge ukwengeza i-CSS eyengeziwe.
<div class="fixed-bottom">...</div>
Okunamathelayo phezulu
Misa i-elementi phezulu kwembobo yokubuka, ukusuka onqenqemeni ukuya onqenqemeni, kodwa kuphela ngemva kokuthi uskrole udlule kuyo. Insiza .sticky-top
isebenzisa i-CSS's position: sticky
, engasekelwe ngokugcwele kuzo zonke iziphequluli.
I-IE11 kanye ne-IE10 zizonikeza position: sticky
njenge- position: relative
. Kanjalo, sigoqa izitayela @supports
embuzweni, sikhawulela ukunamathela kuziphequluli kuphela ezingakunikeza ngendlela efanele.
<div class="sticky-top">...</div>