position a dhéanann rialú ar an dóigh ar cuirtear eilimint i láthair agus ar chúrsaí an fhéidhmíochta ("offset properties") (top/right/bottom/left) a bheith i bhfeidhm.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute a bhealadh eilimint i gcoibhneas a gcéad dhúchasóir atá suite (rud ar bith seachas static). Dá bhrí sin a shocraíonn tú position: relative ar thuismitheoir chun go mbeadh sé ina phointe tagartha:
.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 */
}
Tá an patrún tuismitheoir-relative / páiste-absolute sin i ngach áit: babhtaí, foluain-roghchlár, leideanna, cnaipe dúnta.
.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), agus ansin fanann sé ann fad a bhíonn a choimeádán san amharc — go hiontach do cheanntásca na rannóige.Baineann eilimintí absolute/fixed as an sreabh gnáth, ionas nach raibh spás de dhíth orthu — gníomhú na ndeartháir agus na ndeirfiúracha go bhfuil siad ann, ar féidir a dhéanamh forshreabhadh. Pleanáil do sin (mar shampla, cuir páidíniú leis chun a chúiteamh ar bharra seolaidh socraithe).
Tá position riachtanach do thromchealadh, ceanntásca greamaithe, mód-dhíonta, foluain-roghchlár agus babhtaí.
Tá an gaol tuismitheora-relative/páiste-absolute agus an idirdhealú fixed-vs-sticky ina chroí praiticiúil a úsáideann tú i gconuí.