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-topisebenzisa i-CSS's position: sticky, engasekelwe ngokugcwele kuzo zonke iziphequluli.

I-IE11 kanye ne-IE10 zizonikeza position: stickynjenge- position: relative. Kanjalo, sigoqa izitayela @supportsembuzweni, sikhawulela ukunamathela kuziphequluli kuphela ezingakunikeza ngendlela efanele.

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