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
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șiypoziție stabilită de oricaretop,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.
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:
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 :
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:
Puteți găsi, de asemenea, o explicație video la Canal de schiță a codului ?
Mulțumesc pentru lectură! ✌️
Publicat inițial la marina-ferreira.github.io.
#Cum #să #înțelegeți #CSS #Position #Absolute #odată #pentru #totdeauna
Cum să înțelegeți CSS Position Absolute odată pentru totdeauna
