Kā saprast CSS Position Absolute vienreiz un uz visiem laikiem

Pārtrauciet elementu zaudēšanu ekrānā, saprotot, kā objekts attēlo vietu, kur tam vajadzētu sēdēt

Elementa absolūtā pozicionēšana vairāk attiecas uz elementa konteinera pozīciju, nevis tā pozīciju. Lai varētu sevi pozicionēt, tai jāzina, kurš vecāku divs pats sevi pozicionēs attiecībā pret.

Zemāk redzamais kods parāda četrus ligzdotus divus. .box-1līdz .box-3tiek centrēta, display: flexun margin: autotikai. .box-4nav marginiestatīts, un tas atrodas noklusējuma pozīcijā dokumentu plūsmā.

positionĪpašums ir iestatīta uz visiem elementiem.

body { display: flex;}

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

Lai varētu pozicionēties, elementam jāzina divas lietas:

• koordinātes šim xun ypozīciju kopums, ko nu top, right, bottom,left
• kuru vecāku tā pozicionēs attiecībā pret sevi

Uzklājot position: absoluteuz .box-4elementu, tiek noņemts no normal document flow. Tā kā tā koordinātas nav iestatītas, tā vienkārši paliek noklusējuma pozīcijā, kas ir tā augšējā kreisā stūra vecākā div.

Iestatot top: 0un left: 0elementam ir jāzina, kuru vecāku tas uzskatīs par atskaites punktu. Lai būtu atsauce, elements jānovieto ekrānā ar position: relative. .box-4tad sāk jautāt vecāku diviem, vai viņi ir izvietoti. Sākumā tā jautā .box-3un saņem No, I am not positioned.atbildi. Tas pats attiecas uz .box-2un pēc tam .box-1, jo visiem ir position: unset.

Tā kā .box-4nevarēja atrast novietotu vecāku, tas sevi pozicionē attiecībā pret body. Šis elements vienmēr tiek novietots ekrānā:

Ja mēs iestatījām position: relativeuz .box-1, kad to .box-4jautā: Are you positioned?tā tiek saņemta Yes I am.kā atbilde. Un pēc tam .box-4tiks novietots attiecībā pret .box-1:

Tas pats attiecas uz .box-2un .box-3.

Absolūti novietotais elements sevi pozicionēs attiecībā pret tuvāko novietoto senču.

Tiklīdz tā atrod pozicionētu senču, elementu pozīcija virs tā vairs nav būtiska. Turpmāk Attēli rāda izkārtojumu iestatījumu position: relativeuz .box-2 un .box-3, attiecīgi:

Video paskaidrojumu varat atrast arī vietnē Code Sketch Channel?

Paldies, ka lasījāt! ✌️

Sākotnēji publicēts marina-ferreira.github.io.