Позиция

Элемент орнын жылдам конфигурациялау үшін осы стенографиялық утилиталарды пайдаланыңыз.

Ортақ құндылықтар

Жылдам орналасу сабақтары қол жетімді, бірақ олар жауап бермейді.

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

Бекітілген жоғарғы

Элементті көру терезесінің жоғарғы жағына шетінен шетіне орналастырыңыз. Жобаңыздағы тұрақты позицияның салдарын түсінгеніңізге көз жеткізіңіз; сізге қосымша CSS қосу қажет болуы мүмкін.

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

Бекітілген түбі

Элементті көру терезесінің төменгі жағына шетінен шетіне орналастырыңыз. Жобаңыздағы тұрақты позицияның салдарын түсінгеніңізге көз жеткізіңіз; сізге қосымша CSS қосу қажет болуы мүмкін.

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

Жабысқақ үстіңгі жағы

Элементті көру терезесінің жоғарғы жағына шетінен шетіне қарай орналастырыңыз, бірақ оның жанынан өткеннен кейін ғана. .sticky-topУтилита position: stickyбарлық браузерлерде толық қолдау көрсетілмейтін CSS-ті пайдаланады .

IE11 және IE10 position: stickyретінде көрсетіледі position: relative. Осылайша, біз стильдерді @supportsсұранысқа орап, жабысқақтықты тек оны дұрыс көрсете алатын браузерлермен шектейміз.

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