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-1
at .box-3
være centreret af display: flex
og margin: auto
kun. .box-4
har ikke margin
indstillet, og det sidder i sin standardposition i dokumentflowet.
Den position
egenskab 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
x
ogy
indstillede position ved ententop
,right
,bottom
,left
- hvilken forælder den vil placere sig i forhold til
Ved anvendelse position: absolute
på .box-4
elementet 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: 0
og left: 0
elementet 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-4
derefter begynder at spørge sine forældre divs, hvis de er placeret. Først spørger den .box-3
og får No, I am not positioned.
som et svar. Det samme gælder for .box-2
og da .box-1
, da alle har gjort det position: unset
.
Da det ikke .box-4
var 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: relative
til .box-1
, når vi .box-4
spørger det: Are you positioned?
det bliver Yes I am.
som et svar. Og så .box-4
vil være placeret i forhold til .box-1
:

Det samme gælder for .box-2
og .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: relative
til .box-2
og .box-3
henholdsvis:


Du kan også finde en videoforklaring på Code Sketch Channel?.
Tak for læsningen! ✌️
Oprindeligt offentliggjort på marina-ferreira.github.io.
