position nadzira, kako je element postavljen, in ali se nanašajo svojstva odmika (top/right/bottom/left).
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
position nadzira, kako je element postavljen, in ali se nanašajo svojstva odmika (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute pozicionira element glede na njegovo najbližjo progenitor, ki je pozicioniran (kaj koli drugega kot static). Zato nastavite position: relative na starša, da ga naredite referenčno točko:
.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 */
}
Ta vzorec relative-parent / absolute-child je povsod: znački, spustni meniji, tooltip-i, gumbi za zapiranje.
.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), nato ostane tam, medtem ko je njegov vsebnik v pogledu — odlično za naslove razdelkov.absolute/fixed elementi so odstranjeni iz normalnega toka, zato ne rezervirajo prostora — sorodniki delujejo, kot da niso tam, kar lahko povzroči prekrivanje. To načrtujte (npr. dodajte razmik, da kompenzirate fiksno navigacijsko vrstico).
position je bistvenega pomena za prekrivajoče sloje, lepljive naslove, modalne okne, spustne menije in znački.
Razmerje relative-parent/absolute-child in razlikovanje fixed-vs-sticky sta praktično jedro, ki ga stalno uporabljate.