position kontrolira kako se element postavlja i primjenjuju li se svojstva pomaka (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute postavljuje element relative u odnosu na njegovog najbližeg pozicioniranog pretka (bilo šta osim static). Zato postavljate position: relative na roditelja da bi bilo referentna točka:
.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 */
}
Ovaj uzorak relative-roditelja / absolute-djeteta je svugdje: značke, padajući izbornici, savjeti, dugmadi za zatvaranje.
.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), zatim ostaje tamo dok je njegov spremniku vidljiv — odličan za zaglavlje odjeljenja.Elementi absolute/fixed su uklonjeni iz normalnog toka, pa ne rezerviraju prostor — braća i sestre ponašaju se kao da nisu tu, što može uzrokovati preklapanje. Planirajte to (npr. dodajte padding da kompenzujete fixed navbar).
position je bitan za overlay-e, sticky zaglavlja, modale, padajuće izbornike i značke.
Relationship relative-roditelja/absolute-djeteta i razlika fixed-vs-sticky su praktična srž koju stalno koristite.