Sådan forstås CSS Position Absolut en gang for alle

Stop med at miste dine elementer på skærmen ved at forstå, hvordan et objekt figurerer, hvor det skal sidde

At placere et element absolut handler mere om elementets containerposition end dets egen. For at være i stand til at placere sig selv skal den vide, hvilken forælder div det vil placere sig i forhold til.

Koden nedenfor viser fire indlejrede divs. .box-1at .box-3være centreret af display: flexog margin: autokun. .box-4har ikke marginindstillet, og det sidder i sin standardposition i dokumentflowet.

Den positionegenskab er frakoblet for alle elementer.

body { display: flex;}

.box-1,.box-2,.box-3 { display: flex; margin: auto;}

For at være i stand til at placere sig selv skal et element kende to ting:

• koordinater for sin xog yindstillede position ved enten top, right, bottom,left
• hvilken forælder den vil placere sig i forhold til

Ved anvendelse position: absolutepå .box-4elementet fjernes fra normal document flow. Da dets koordinater ikke er indstillet, forbliver den simpelthen på standardpositionen, som er dens overordnede div i øverste venstre hjørne.

Ved at indstille top: 0og left: 0elementet skal derefter vide, hvilken forælder det vil betragte som et referencepunkt. For at være en reference skal elementet placeres på skærmen med position: relative. .box-4derefter begynder at spørge sine forældre divs, hvis de er placeret. Først spørger den .box-3og får No, I am not positioned.som et svar. Det samme gælder for .box-2og da .box-1, da alle har gjort det position: unset.

Da det ikke .box-4var muligt at finde en positioneret forælder, placerer den sig i forhold til body. Dette element er altid placeret på skærmen:

Hvis vi sætter os position: relativetil .box-1, når vi .box-4spørger det: Are you positioned?det bliver Yes I am.som et svar. Og så .box-4vil være placeret i forhold til .box-1:

Det samme gælder for .box-2og .box-3.

Det absolut placerede element placerer sig i forhold til den nærmeste positionerede forfader.

Så snart den finder en positioneret forfader, er placeringen af ​​elementerne over den ene ikke længere relevant. Billederne nedenfor viser layout på indstillingen position: relativetil .box-2 og .box-3henholdsvis:

Du kan også finde en videoforklaring på Code Sketch Channel?.

Tak for læsningen! ✌️

Oprindeligt offentliggjort på marina-ferreira.github.io.