Hogyan lehet megérteni a CSS Position Absolute-t egyszer és mindenkorra

Ne veszítse el az elemeket a képernyőn azzal, hogy megérti, hogy egy objektum hogyan ábrázolja, hol kellene állnia

Az elem elhelyezése abszolút inkább az elem konténer helyzetét jelenti, mintsem a saját helyzetét. Ahhoz, hogy pozícionálni tudja magát, tudnia kell, hogy melyik szülő div-hez viszonyítja magát.

Az alábbi kód négy beágyazott div-t mutat. .box-1hogy .box-3vannak központosítva display: flexés margin: autocsak. .box-4nincs marginbeállítva, és az alapértelmezett helyzetben van a dokumentumfolyamatban.

A positiontulajdonság nincs minden elemre beállítva.

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

Ahhoz, hogy pozícionálni tudja magát, egy elemnek két dolgot kell tudnia:

  • koordinátákat a xés ybeállított helyzetben bármelyik top, right, bottom,left
  • melyik szülőhöz viszonyítja magát

Alkalmazásáról szóló position: absolute, hogy .box-4az elemet eltávolítjuk a normal document flow. Mivel a koordinátái nincsenek beállítva, egyszerűen az alapértelmezett pozícióban marad, amely a bal felső sarok szülő div.

Azáltal top: 0, és left: 0az elem, akkor tudnia kell, hogy melyik szülő meg fogja vizsgálni, mint a viszonyítási pont. Ahhoz, hogy referencia lehessen, az elemet a gombbal kell a képernyőre helyezni position: relative. .box-4majd elkezdi kérdezni a szülő div-jait, hogy vannak-e elhelyezve. Eleinte választ kér .box-3és kap No, I am not positioned.. Ugyanez vonatkozik .box-2akkor és akkor is .box-1, mivel mindegyikük rendelkezik position: unset.

Mivel .box-4nem sikerült megtalálni a pozicionált szülőt, a magához képest pozícionálja magát body. Ez az elem mindig a képernyőn helyezkedik el:

Ha beállítottuk position: relativea .box-1, amikor .box-4megkérdezi, hogy: Are you positioned?ez lesz Yes I am.a válasz. És akkor a .box-4következőkhöz viszonyítva helyezkednek el .box-1:

Ugyanez vonatkozik a .box-2és .box-3.

Az abszolút helyzetben lévő elem a legközelebbi elhelyezett őshöz viszonyítva pozícionálja magát.

Amint megtalálja a pozicionált ősöket, az elemek fölötte lévő pozíciója már nem releváns. Az alábbi képek mutatják az elrendezés beállításával position: relativea .box-2 és .box-3rendre:

Videomagyarázatot is talál a Code Sketch Channel?

Köszönöm, hogy elolvasta! ✌️

Eredetileg a marina-ferreira.github.io oldalon jelent meg.