de Marina Ferreira

Cum să înțelegeți CSS Position Absolute odată pentru totdeauna

Nu mai pierde elementele de pe ecran prin înțelegerea modului în care un obiect figurează unde ar trebui să stea

Cum sa intelegeti CSS Position Absolute odata pentru totdeauna

Poziționarea unui element este mai mult despre poziția containerului elementului decât despre propria sa. Pentru a se putea poziționa, trebuie să știe la ce părinte div se va poziționa față de.

Codul de mai jos prezintă patru divizii imbricate. .box-1la .box-3sunt centrate de display: flex și margin: auto numai. .box-4 nu are margin setat și se află în poziția sa implicită în fluxul de documente.

<body>  <div class="box-1">    <div class="box-2">      <div class="box-3">        <div class="box-4"></div>      </div>    </div>  </div></body>

position proprietatea nu este setată la toate elementele.

body {  display: flex;}

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

Pentru a se putea poziționa, un element trebuie să știe două lucruri:

coordonate pentru x și y poziție stabilită de oricare top, right, bottom, left
cu ce părinte se va poziționa față de

La aplicare position: absolute la .box-4 elementul este eliminat din normal document flow. Deoarece coordonatele sale nu sunt setate, pur și simplu rămâne la poziția implicită, care este divul său părinte din colțul din stânga sus.

1611646506 496 Cum sa intelegeti CSS Position Absolute odata pentru totdeauna — .box-4 poziție absolută fără offset.

Prin setare top: 0 și left: 0 atunci elementul trebuie să știe ce părinte îl va considera drept punct de referință. Pentru a fi o referință, elementul trebuie poziționat pe ecran cu position: relative. .box-4 apoi începe să-i întrebe pe divs-ul părinte dacă sunt poziționați. La început, întreabă .box-3 și devine No, I am not positioned. ca răspuns. Același lucru este valabil și pentru .box-2 și apoi .box-1 , deoarece toți au position: unset .

La fel de .box-4 nu a putut găsi un părinte poziționat, se poziționează în raport cu body. Acest element este întotdeauna poziționat pe ecran:

1611646506 154 Cum sa intelegeti CSS Position Absolute odata pentru totdeauna — .box-4 poziție absolută. Poziția divsului părinte este nesetată

Dacă stabilim position: relative la .box-1 , cand .box-4 o întreabă: Are you positioned? devine Yes I am. ca răspuns. Și apoi .box-4 va fi poziționat în raport cu .box-1 :

1611646506 603 Cum sa intelegeti CSS Position Absolute odata pentru totdeauna — poziția .box-4 absolută, poziția .box-1 relativă.

Același lucru este valabil și pentru .box-2 și .box-3 .

Elementul absolut poziționat se va poziționa în raport cu cel mai apropiat strămoș poziționat.

De îndată ce găsește un strămoș poziționat, poziția elementelor de deasupra acestuia nu mai este relevantă. Imaginile de mai jos prezintă aspectul setării position: relative la .box-2 și .box-3 , respectiv: