position inadhibiti jinsi kitu kinavyowekwa na ikiwa mali ya kuzama (top/right/bottom/left) inatumika.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute huweka kipengele kwa heshima ya mzazi wake wa karibu ambaye umewekwa (kitu chochote zaidi ya static). Kwa hivyo unaweka position: relative kwa mzazi ili kuufanya kuwa hatua ya kumbukumbu:
.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 */
}
Hii kwa mzazi wa relative / mtoto wa absolute haipo kila mahali: bedges, dropdown menyu, tooltip, kuzima vifungo.
.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), kisha inabaki hapo huku kontena lake iko katika mwoneko — nzuri kwa kichwa cha sehemu.Kipengele cha absolute/fixed kimetolewa kutoka kutoka mtiririko wa kawaida, kwa hivyo haifanyi chumba — ndugu na kaka hufanya kama kama wako huko, ambayo inaweza kusababisha kupishana. Panga kwa hivyo (mfano kuongeza padding kupinga bar ya mageuzi inayobaki).
position ni muhimu kwa overlays, kichwa kinachobaki, modals, dropdown menyu, na bedges.
Hubungan ya mzazi wa relative/mtoto wa absolute na tofauti ya fixed-vs-sticky ndiyo kundi ya utendaji unayoitumia kila mara.