Ipo

Lo awọn wọnyi shorthand igbesi fun ni kiakia tito le awọn ipo ti ohun ano.

Awọn iye ti o wọpọ

Awọn kilasi ipo iyara wa, botilẹjẹpe wọn ko ṣe idahun.

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

Oke ti o wa titi

Gbe ohun elo kan si oke ti oju wiwo, lati eti si eti. Rii daju pe o loye awọn ramifications ti ipo ti o wa titi ninu iṣẹ akanṣe rẹ; o le nilo lati fi afikun CSS kun.

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

Ti o wa titi isalẹ

Gbe ohun elo kan si isalẹ ti oju wiwo, lati eti si eti. Rii daju pe o loye awọn ramifications ti ipo ti o wa titi ninu iṣẹ akanṣe rẹ; o le nilo lati fi afikun CSS kun.

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

Oke alalepo

Gbe ohun kan si oke ibudo wiwo, lati eti si eti, ṣugbọn lẹhin ti o yi lọ kọja rẹ. IwUlO .sticky-topnlo CSS's position: sticky, eyiti ko ni atilẹyin ni kikun ni gbogbo awọn aṣawakiri.

IE11 ati IE10 yoo ṣe position: stickybi position: relative. Bi iru bẹẹ, a fi ipari si awọn aṣa ni @supportsibeere kan, ni opin si alalepo si awọn aṣawakiri nikan ti o le ṣe daradara.

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