Poziționarea elementelor cu CSS în dezvoltarea web nu este atât de ușoară pe cât pare. Lucrurile se pot complica rapid pe măsură ce proiectul dvs. devine mai mare și fără a avea o bună înțelegere a modului în care CSS se ocupă de alinierea elementelor HTML, nu veți putea remedia problemele de aliniere.
Există diferite moduri / metode de poziționare a elementelor cu CSS pur. Folosind CSS plutește, afișează și poziţie proprietățile sunt cele mai comune metode.
În acest articol, voi explica una dintre cele mai confuze modalități de aliniere a elementelor cu CSS pur: proprietate de poziție. Am și un alt tutorial pentru Proprietatea de afișare CSS aici.
Dacă preferați, puteți viziona versiunea video a Tutorialului de poziționare CSS:
Sa incepem…
Proprietăți de poziție și ajutor CSS
Deci, există 5 valori principale ale Poziţie Proprietate:
position: static | relative | absolute | fixed | sticky
și proprietăți suplimentare pentru setarea coordonatelor unui element (le numesc „Proprietăți de ajutor”):
top | right | bottom | left Si z-index
Notă importantă: Proprietățile de ajutor nu funcționează fără o poziție declarată sau cu poziție: statică.
Ce este acest index Z?
Avem înălțimea și lățimea (x, y) ca 2 dimensiuni. Z este a 3-a dimensiune. Un element din pagina web vine în fața altor elemente ca al său z-index valoarea crește.
Z-index nu funcționează cu
position: staticsau fără o poziție declarată.
Puteți viziona videoclipul pe canalul meu pentru a vedea cum să utilizați indexul z în mai multe detalii:
Acum să mergem mai departe cu poziţie proprietate valori…
1. static
position: static este valoare implicită. Indiferent dacă îl declarăm sau nu, elementele sunt poziționate într-o ordine normală pe pagina web. Să dăm un exemplu:
În primul rând, ne definim structura HTML:
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>Apoi, creăm 2 casete și le definim lățimile, înălțimile și pozițiile:
.box-orange { // without any position declaration
background: orange;
height: 100px;
width: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static; // Declared as static
}
După cum putem vedea în imagine, definitoriu poziție: statică sau nu nu face nicio diferență. Cutiile sunt poziționate în conformitate cu flux normal de documente.
2. Relativ
position: relative: Noua poziție a unui element față de poziția sa normală.
Incepand cu position: relative și pentru toți nestatic poziţie valori, suntem capabili să schimbăm valorile unui element Mod implicit poziția utilizând helper propertiepe care le-am menționat mai sus.
Să mutăm caseta portocalie de lângă cea albastră.
.box-orange {
position: relative; // We are now ready to move the element
background: orange;
width: 100px;
height: 100px;
top: 100px; // 100px from top relative to its old position
left: 100px; // 100px from left
}
NOTĂ: Utilizarea poziție: relativă pentru un element, nu afectează pozițiile altor elemente.
3. Absolut
În position: relative, elementul este poziționat relativ la sine. Cu toate acestea, un absolutte iubesc elementul poziționat este în raport cu părintele său.
Un element cu position: absolute este eliminat din fluxul normal de documente. Este poziționat automat până la punctul de plecare (coltul din stanga sus) a elementului său părinte. Dacă nu are elemente părinte, atunci inițialul document va fi părintele său.
De cand position: absolute elimină elementul din fluxul documentului, alte elemente sunt afectate și comportați-vă pe măsură ce elementul este eliminat complet de pe pagina web.
Să adăugăm un container ca element părinte:
<body>
<div class="container">
<div class="box-orange"></div>
<div class="box-blue"></div>
</div>
</body>.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}
Acum se pare că a dispărut cutia albastră, dar nu. Caseta albastră se comportă ca și când caseta portocalie este îndepărtată, deci se deplasează până la locul casetei portocalii.
Să mutăm caseta portocalie cu 5 pixeli:
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
left: 5px;
top: 5px;
}
Coordonatele unui absolut elementul poziționat sunt în raport cu părintele său dacă părintele are și un poziție nestatică. În caz contrar, proprietățile helper poziționează elementul în raport cu inițială.
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}
4. Fix
Ca position: absolute, elementele poziționate fixe sunt, de asemenea, eliminate din fluxul normal de documente. Diferențele sunt:
- Sunt numai în raport cu documentul , nu alți părinți.
- Sunt nu este afectat de derulare.
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: fixed;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}Aici, în exemplu, schimb poziția casetei portocalii în fix, și de data aceasta este relativ 5px la dreapta , nu este părinte (container):
După cum putem vedea, derularea paginii nu afectează fix cutie poziționată. Nu mai este relativ la părintele (containerul) său.
5. Lipicios
position: sticky poate fi explicat ca un amestec de position: relative și position: fixed.
Se comportă până la un punct declarat ca position: relative, după aceea își schimbă comportamentul în position: fixed . Cel mai bun mod de a explica poziție: lipicioasă este printr-un exemplu:
IMPORTANT: Position Sticky nu este acceptat în Internet Explorer și în versiunile anterioare ale altor browsere. Puteți verifica asistența browserului la caniuse.com.
Cel mai bun mod de a înțelege proprietatea poziției CSS este prin practică. Continuați să codificați până când aveți o mai bună înțelegere. Dacă ceva nu este clar, vă voi răspunde la întrebările de mai jos în secțiunea de comentarii.
Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați urmărește-mă pe Youtube!
Mulțumesc că ai citit!
