position kontrollon se si përshkruhet një element dhe nëse vetitë e zhvendosjes (top/right/bottom/left) zbatohen.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute pozicionon një element në lidhje me paraardhësin e tij më të afërt që është i pozicionuar (çdo gjë përveç static). Pra, ju vendosni position: relative në prindin për ta bërë atë pikën e referencës:
.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 */
}
Ky model relative-prind / absolute-fëmijë është kudo: shenja, rënie-menuja, tooltip-et, butona mbylljeje.
.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), pastaj qëndron atje ndërsa kontejneri i tij është në pamje — i madh për titujt e seksionit.absolute/fixed elementet janë hequr nga rrjedha normale, kështu që nuk ruajnë hapësirë — vëllezërit e motrat veprojnë sikur nuk janë atje, e cila mund të shkaktojë mbivendosje. Planifikojeni atë (p.sh. shtoni mbushje për të kompensuar një barre navigimi fikse).
position është thelbësor për veshje, koka ngjitëse, modale, rënie-meuja, dhe shenja.
Razmerja relative-prind/absolute-fëmijë dhe dallimi fixed-vs-sticky janë bërthama praktike që përdorni vazhdimisht.