ئورنى

ئېلېمېنتنىڭ ئورنىنى تېز تەڭشەش ئۈچۈن بۇ قىسقارتىلما قوراللارنى ئىشلىتىڭ.

ئورتاق قىممەت

گەرچە ئىنكاس قايتۇرمىسىمۇ ، تېز ئورۇن بەلگىلەش سىنىپى بار.

<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

ئېلېمېنتنى كۆرۈنۈش ئېغىزىنىڭ ئۈستىگە ، قىردىن چېتىگە قويۇڭ ، ئەمما ئۇنى بېسىپ ئۆتكەندىن كېيىن. بۇ مۇلازىمەت بارلىق توركۆرگۈچلەردە تولۇق قوللىمايدىغان .sticky-topCSS لارنى ئىشلىتىدۇ .position: sticky

IE11 ۋە IE10 قىلىپ position: stickyبېرىدۇ position: relative. مۇشۇنىڭغا ئوخشاش ، بىز ئۇسلۇبلارنى سوئالغا ئوراپ ، @supportsئۇنى توغرا كۆرسىتەلەيدىغان توركۆرگۈچلەر بىلەنلا چەكلەيمىز.

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