position szabályozza, hogy az elem hogyan helyezkedik el, és hogy az eltolás tulajdonságai (top/right/bottom/left) érvényesek-e.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
position szabályozza, hogy az elem hogyan helyezkedik el, és hogy az eltolás tulajdonságai (top/right/bottom/left) érvényesek-e.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute egy elemet a legközelebbi pozicionált ősökhöz (static-on kívül bármit) képest helyez el. Ezért a position: relative-et egy szülőre állítja be, hogy az legyen a referenciapont:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Ez a relative-szülő / absolute-gyermek minta mindenütt megtalálható: badgek, legördülő menük, tooltipek, bezárás gombok.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), majd ott marad, amíg a tárolója látható — nagyszerű szakaszfejlécekhez.Az absolute/fixed elemek eltávolítódnak a normál folyamból, ezért nem foglalnak le helyet — a testvérek úgy viselkednek, mintha nem lennének ott, ami átfedéshez vezethet. Tervezzen erre (pl. padding hozzáadásával kompenzálhatja a fixed navbar-t).
A position elengedhetetlen az overlay-ek, ragadós fejlécek, módálisok, legördülő menük és badgek számára.
A relative-szülő/absolute-gyermek kapcsolat és a fixed-vs-sticky különbségtétel az a gyakorlati lényeg, amelyet folyamatosan használ.