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: static sau fără o poziție declarată.

Cum se utilizeaza proprietatea de pozitie in CSS pentru a
Elementele sunt ordonate din spate în față, ca și ale lor indexul z crește

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
}
1611696546 893 Cum se utilizeaza proprietatea de pozitie in CSS pentru a
același rezultat cu și fără poziție: 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
}
1611696546 375 Cum se utilizeaza proprietatea de pozitie in CSS pentru a
Cutia portocalie este mutată 100px în partea de jos și în dreapta, în raport cu poziția sa normală

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;
}
1611696546 679 Cum se utilizeaza proprietatea de pozitie in CSS pentru a
poziție: absolută duce elementul la început a părintelui său

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;
}
1611696546 467 Cum se utilizeaza proprietatea de pozitie in CSS pentru a
Acum putem vedea caseta albastră

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
}
1611696546 411 Cum se utilizeaza proprietatea de pozitie in CSS pentru a

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.

1611696546 234 Cum se utilizeaza proprietatea de pozitie in CSS pentru a
Suport pentru browser pentru poziție: lipicios

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!