Poziționarea elementelor

În mod prestabilit, toate elementele de pe pagină sunt aranjate secvențial:

- Elementele de bloc sunt situate una sub cealaltă,
- elementele rând se află unul după celălalt.

În CSS, este posibil să controlați poziționarea elementelor, prin care puteți rupe ordinea stabilită a locației lor și plasați elementele în locul dorit al paginii.

Poziționarea este efectuată utilizând proprietatea de poziție. Acesta stabilește metoda de poziționare și poate fi aplicată tuturor elementelor.

Există o poziționare absolută și relativă a elementelor.

Poziționarea absolută

Valoarea absolută a proprietății poziției stabilește poziționarea absolută a elementului.

Cu poziția absolută, coordonatele noii poziții a elementului sunt specificate utilizând proprietățile de sus. dreapta. de jos și de stânga:

- în raport cu marginile ferestrei browserului, dacă nu există niciun element părinte sau dacă valoarea statică (valoarea implicită) este atribuită proprietății poziției browserului.

- față de marginile elementului părinte, dacă proprietatea sa este absolută. fix sau rudă.

O trăsătură distinctivă a poziționării absolute este eliberarea unui element din spațiul ocupat anterior: zona eliberată poate fi ocupată de un alt element.

Cu valoarea proprietatii pozitiei fixe, elementul va fi, de asemenea, absolut pozitionat. Dar elementul este fixat în punctul cu coordonatele date de proprietățile de sus. dreapta. de jos și de la stânga. Nu derulează cu conținutul paginii.

Pinguinul este situat în partea stângă a paragrafului - deoarece ar trebui să fie localizat în mod implicit.

Textul sa mutat la locul ocupat anterior de pinguin. Și pinguinul este fix!

În exemplul de mai sus, pinguinul din al doilea paragraf stabilește valoarea fixă ​​pentru proprietatea de poziție și specifică coordonatele cuvintele cheie de sus și de dreapta.

Coordonatele sunt numărate din marginile ferestrei browserului, deoarece elementul părinte (paragraful - eticheta

) proprietatea de poziție nu este specificată, prin urmare, aceasta ia valoarea implicită de statică.

Astfel, pinguinul este situat la o distanță de 300 de pixeli de marginea superioară și de 220 de pixeli de la marginea din dreapta a ferestrei browserului. Și nu se defilează cu conținutul paginii: întotdeauna îl vedeți în același loc fix (vezi dreapta).

Poziționarea relativă

Valoarea relativă a proprietății poziției stabilește poziționarea relativă a elementului.

Cu poziționarea relativă, coordonatele noii poziții a elementului sunt de asemenea specificate utilizând proprietățile de vârf. dreapta. de jos și de la stânga.

Dar coordonatele sunt măsurate în raport cu locația inițială a elementului. În același timp, el nu eliberează spațiul ocupat, iar acest loc nu poate fi ocupat de alte elemente.

Pinguinul este situat în partea stângă a paragrafului - deoarece ar trebui să fie localizat în mod prestabilit.

Textul nu sa mutat la locul ocupat anterior de pinguin: este ca și cum ar fi lăsat pentru el!

În exemplul de mai sus, pentru pinguinul din al doilea paragraf, se stabilește valoarea relativă a proprietății poziției și sunt date coordonatele cu cuvintele cheie de jos. 10px și stânga. 100px.

Coordonatele sunt calculate în raport cu locația inițială a poziției pinguinului.

Straturi în CSS. Coordonata Z

Condiționat, fiecare element are două coordonate (deoarece avem de a face cu un plan) X și Y, care determină poziția sa pe pagină.

În CSS, este posibilă specificarea celei de-a treia coordonate spațiale Z pentru elemente, simulând astfel a treia dimensiune și permițând suprapunerea elementelor.

Proprietatea z-index implementează această caracteristică: stabilește valoarea coordonatei Z. Prin specificarea numărului de strat pe care este localizat elementul și prin aceasta stabilind ordinea elementelor suprapuse peste ele

Valoarea proprietății indexului z poate fi orice număr întreg pozitiv sau 0. Cu cât valoarea Z este mai mare, cu atât stratul este mai mare față de straturile cu valoarea de coordonate mai mică.

De exemplu, stratul cu numărul 3 va fi mai aproape de utilizator decât straturile cu numerele 2 și 1 sau un strat fără coordonatele specificate Z.

În mod implicit, proprietatea z-index este setată la auto sau 0. Și în prim-plan este elementul descris în codul sursă HTML de mai jos, precum și pentru valorile egale ale proprietății z-index.

Proprietatea se aplică elementelor poziționate, adică elementelor pentru care se stabilește proprietatea de poziție cu valoarea absolută. fix sau rudă.

Salutări!

Salutări!

Explicație, de exemplu. Roșu "Hi" este mai aproape de utilizator, deoarece are o valoare mai mare pentru proprietatea z-index. egal cu 2. În timp ce pentru indexul albastru "Bun venit" z este 1.

Articole similare

• Unelte utilizate pentru a elimina elementele fixe ale sistemului de suport

• Gvul superlist knauf - folii din fibra de gips, knauf, glvl, superpol, elemente de podea

• Triste istorie - sau - 2018 ani un element peltier pentru răcirea procesorului

Trimiteți-le prietenilor: