Poziția elementelor HTML joacă un rol vital în organizarea componentelor paginii web. Mai precis, poziția elementelor poate fi ajustată utilizând CSS „ poziţie ” proprietate. Această proprietate poate fi asociată cu proprietăți de offset, cum ar fi proprietățile de sus, stânga, dreapta și de jos, oferind valori specifice pentru a ajusta elementul din pagină. Însă ' absolut ” elementele poziționate pot fi reglate în raport cu cel mai apropiat element poziționat.
Această postare va explica poziționarea absolută CSS.
Proprietatea „poziție” CSS
„ poziţie ” proprietatea din CSS poate fi utilizată pentru a ajusta poziția elementului. Diferite valori ale proprietății de poziție sunt fixe, absolute, relative, statice și lipicioase. Aceste valori sunt setate cu proprietățile offset, cum ar fi sus, dreapta, stânga și jos, pentru ajustarea poziției elementului.
Cum se aplică poziționarea absolută CSS?
Poziționarea absolută a elementului poate fi aplicată folosind CSS „ poziţie „proprietate cu valoarea „ absolut ”. Elementul cu poziția absolută este ajustat corespunzător cu elementul părinte poziționat cel mai apropiat. Dar dacă strămoșul nu este poziționat, acesta se va ajusta în raport cu secțiunea corpului documentului.
Exemplu
Să înțelegem conceptul cu un exemplu practic.
Pasul 1: Creați un fișier HTML
În fișierul HTML, în elementul body, adăugați un div cu numele clasei „ principal ”. Apoi, în interiorul div-ului creat, adăugați o etichetă HTML asociată cu următoarele atribute:
-
- „ src ” oferă un link către imagine.
- „ clasă ” este folosit în CSS pentru a stila elementele.
- „ Tot ” atributul specifică textul care apare în locul imaginii dacă imaginea nu se încarcă pe pagină.
- „ Tot ” atributul specifică textul care apare pe pagină în locul imaginii dacă imaginea nu reușește să se încarce pe pagină.
Apoi, adăugați un alt div care conține elementele h1 și p ale titlului și paragrafului:
< div clasă = 'principal' >< div clasă = 'conţinut' >
< img src = „images/linuxlogo.png” clasă = 'Acasă' Tot = „sigla linux” lăţime = „80px” >
< h1 > Poziționarea absolută CSS h1 >
< p > Salutare echipa Linuxhint ! p >
div >
div >
În CSS, mai multe proprietăți de stil sunt utilizate pentru a decora elementele HTML.
Pasul 2: Stilați „toate” elementele
* {font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Elementele HTML sunt stilate folosind „ familie de fonturi „proprietate cu valoarea „ Verdana, Geneva, Tahoma, sans-serif ”. Această listă de valori asigură că dacă browserul nu acceptă primul stil, celălalt va fi aplicat.
Pasul 3: Stilați „acasă” div
.Acasă {poziție: absolută;
sus: 50px;
stânga: 45px;
}
Mai jos sunt proprietățile aplicate la „ Acasă ” div:
-
- „ poziţie ” proprietatea stabilește poziția elementului. Aici, a adăugat „ absolut ” va plasa elementul relativ la secțiunea de corp a HTML.
- „ top ” este utilizată pentru reglarea verticală a elementului.
- „ stânga ” este utilizată pentru reglarea orizontală a elementului.
Pasul 4: Stilați „conținut” div
.conţinut {culoare de fundal: cadetblue;
latime: 300px;
înălțime: 250px;
padding-stânga: 40px;
margine-stânga: 80px;
}
Mai jos sunt proprietățile CSS care sunt aplicate la „ conţinut ” div:
-
- „ culoare de fundal ” proprietatea setează culoarea de fundal a elementului.
- „ lăţime ” proprietatea setează lățimea elementului.
- „ înălţime ” proprietatea setează înălțimea elementului.
- „ padding-stânga ” proprietatea este setată pentru a adăuga spațiu în partea stângă a conținutului elementului.
- „ margine-stânga ” proprietate specifică spațiul din partea stângă a elementului.
În acest moment, pagina noastră web va arăta astfel:
Din rezultatul de mai sus se poate observa că imaginea casei div este plasată la 50px din partea de sus și 45px din stânga corpului documentului. Mai mult, poziția div-ului de acasă este setată în raport cu secțiunea de corp a HTML.
Cum se ajustează poziția elementului „față” de elementul părinte poziționat?
Această secțiune vă va ghida în ajustarea poziției elementului în raport cu cel mai apropiat element părinte de poziție.
Setați „poziția” Proprietatea „conținutului” div
poziție: relativă;
Pentru a regla poziția elementului față de elementul părinte, setați „ poziţie „proprietatea elementului părinte la „ relativ ” valoare.
Setați proprietatea „poziție” a elementului „img”.
.Acasă {poziție: absolută;
sus: 100px;
stânga: 220px;
}
Aici:
-
- „ poziţie ” proprietate cu valoarea setată ca “ absolut ” va fi poziționat relativ la elementul părinte (adică poziția div de conținut este setată cu valoarea relativă).
- „ top Proprietatea ” este utilizată pentru a seta poziția elementului de sus.
- „ stânga Proprietatea ” este utilizată pentru a seta poziția elementului din stânga.
Ieșire
Din rezultat se poate observa că imaginea a fost poziționată în raport cu div-ul părinte și pare potrivită.
Concluzie
CSS „ poziţie ” este utilizată pentru a seta poziția elementelor HTML. Această proprietate poate fi evaluată ca fixă, relativă, absolută, lipicioasă și statică. „ absolut ” valoarea va poziționa elementul corespunzător elementului părinte poziționat în apropiere. Această postare a explicat poziționarea absolută CSS cu un exemplu practic.