Prestanite gubiti svoje elemente na zaslonu tako što ćete razumjeti kako objekt figurira tamo gdje treba sjediti
Apsolutno pozicioniranje elementa više se odnosi na položaj spremnika elementa nego na njegov vlastiti. Da bi se mogao pozicionirati, mora znati na koji će se nadređeni div pozicionirati u odnosu.
Kôd u nastavku prikazuje četiri ugniježđena div-a. .box-1da .box-3su usredotočeni na display: flexi margin: autosamo. .box-4nije marginpostavljeno i nalazi se na svom zadanom položaju u tijeku dokumenata.
positionSvojstvo nije postavljeno na svim elementima.
body { display: flex;}.box-1,.box-2,.box-3 { display: flex; margin: auto;}
Da bi se mogao pozicionirati, element mora znati dvije stvari:
- koordinate njenog
xiypoložaju koji je određen od strane bilotop,right,bottom,left - kojem će se roditelju postaviti
Prilikom nanošenja position: absolutena .box-4element uklanja se iz normal document flow. Budući da njegove koordinate nisu postavljene, on jednostavno ostaje na zadanom položaju koji mu je nadređeni div u gornjem lijevom kutu.
Postavljanjem top: 0i left: 0element tada mora znati kojeg će roditelja smatrati referentnom točkom. Da bi bio referenca, element mora biti postavljen na zaslon pomoću position: relative. .box-4zatim počinje pitati svoje nadređene div-ove jesu li postavljeni. Isprva pita .box-3i dobiva No, I am not positioned.kao odgovor. Isto vrijedi i za .box-2te .box-1, jer svi oni imaju position: unset.
Kako .box-4nije uspio pronaći pozicioniranog roditelja, pozicionira se u odnosu na body. Taj je element uvijek postavljen na zaslon:
Ako postavimo position: relativena .box-1, kad .box-4to pita: Are you positioned?dobiva Yes I am.kao odgovor. A zatim .box-4će biti pozicionirani u odnosu na .box-1:
Isto vrijedi .box-2i za .box-3.
Apsolutno pozicionirani element postavit će se u odnosu na najbliži pozicionirani predak.
Čim pronađe pozicioniranog pretka, položaj gore navedenih elemenata više nije relevantan. U nastavku slike prikazuju raspored na postavljanje position: relativena .box-2 i .box-3, odnosno:
Video objašnjenje možete pronaći i na Code Sketch Channel?.
Hvala na čitanju! ✌️
Izvorno objavljeno na marina-ferreira.github.io.
