Înainte de a fi foarte bun la CSS, trebuie să înțelegeți elementele de bază. Trebuie să înțelegeți proprietățile CSS și valorile acestora.

În acest articol, ne vom concentra asupra proprietății poziției CSS. Vom învăța diferitele valori ale proprietății poziției CSS și cum funcționează acestea. Să o facem!

Care este proprietatea poziției CSS?

Proprietatea de poziție CSS definește poziția unui element dintr-un document. Această proprietate funcționează cu proprietățile stânga, dreapta, sus, jos și indexul z pentru a determina poziția finală a unui element pe o pagină.

Există cinci valori pe care le poate lua proprietatea poziției. Sunt:

  1. static
  2. relativ
  3. absolut
  4. fix
  5. lipicios

Să discutăm fiecare dintre ele.

Static

Aceasta este valoarea implicită pentru elemente. Elementul este poziționat în funcție de fluxul normal al documentului. Proprietățile stânga, dreapta, sus, jos și indexul z nu afectează un element cu position: static.

Să folosim un exemplu pentru a arăta asta position: static nu are niciun efect asupra poziției unui element. Avem trei divs plasate într-un container părinte. Vom folosi acest exemplu pe tot parcursul acestui articol.

<html>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Să adăugăm position: static la div cu clasa main-element și în stânga, valorile de top. De asemenea, adăugăm câteva stiluri celorlalte divuri pentru a le diferenția de elementul focalizat.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Acesta este rezultatul.

Ai observat că nu există nicio schimbare? Acest lucru confirmă faptul că proprietățile din stânga și de jos nu afectează un element cu position: static.

Să trecem la următoarea valoare.

Relativ

Elemente cu position: relative rămâne în fluxul normal al documentului. Dar, spre deosebire de elementele statice, proprietățile stânga, dreapta, sus, jos și indexul z afectează poziția elementului. Un offset, bazat pe valorile proprietăților stânga, dreapta, sus și jos, este aplicat elementului față de el însuși.

Să înlocuim position: static cu position: relative în exemplul nostru.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Observați că proprietățile din stânga și de jos afectează acum poziția elementului. De asemenea, observați că elementul rămâne în fluxul normal al documentului și că offset-ul este aplicat relativ la el însuși. Rețineți acest lucru pe măsură ce trecem la alte valori.

Absolut

Elemente cu position: absolute sunt poziționate în raport cu elementele părinte. În acest caz, elementul este eliminat din fluxul normal de documente. Celelalte elemente se vor comporta de parcă acel element nu se află în document. Nu este creat spațiu pentru elementul din aspectul paginii. Valorile stânga, sus, jos și dreapta determină poziția finală a elementului.

Un lucru de remarcat este că un element cu position: absolute este poziționat în raport cu strămoșul său cel mai apropiat. Asta înseamnă că elementul părinte trebuie să aibă o valoare de poziție diferită de position: static.

Dacă cel mai apropiat element părinte nu este poziționat, acesta este poziționat în raport cu următorul element părinte care este poziționat. Dacă nu există niciun element strămoș poziționat, acesta este poziționat în raport cu <html> element.

Să revenim la exemplul nostru. În acest caz, schimbăm poziția elementului principal în position: absolute. De asemenea, vom da elementului său părinte o poziție relativă, astfel încât să nu fie poziționat în raport cu <html> element.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
	background: #f2f2f2;
	padding: 10px;
    border: 1px solid #81adc8;
} 

Iată rezultatul.

Observați că nu a fost creat spațiu în document pentru element. Elementul este acum poziționat în raport cu elementul părinte. Rețineți acest lucru pe măsură ce trecem la următoarea valoare.

Fix

Elementele de poziție fixă ​​sunt similare cu elementele poziționate absolut. Ele sunt, de asemenea, eliminate din fluxul normal al documentului. Dar, spre deosebire de elementul poziționat absolut, ele sunt întotdeauna poziționate în raport cu <html> element.

Un lucru de reținut este că elementele fixe nu sunt afectate de derulare. Rămân mereu în aceeași poziție pe ecran.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

În acest caz, elementul este poziționat în raport cu <html> element. Încercați să derulați pentru a vedea că elementul se fixează pe ecran.

Să trecem la valoarea finală.

Lipicios

position: sticky este un amestec de position: relative și position: fixed. Acționează ca un element relativ poziționat până la un anumit punct de derulare și apoi acționează ca un element fix. Nu vă temeți dacă nu înțelegeți ce înseamnă acest lucru, exemplul vă va ajuta să îl înțelegeți mai bine.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Derulați pe fila rezultat pentru a vedea rezultatul. Vedeți că acționează ca un element relativ până când ajunge la un anumit punct de pe ecran, top: 10px și apoi ajunge acolo la fel ca un element fix.

rezumat

Hopa! A fost o plimbare destul de mare. Dar sper că acest articol v-a ajutat să înțelegeți proprietatea poziției CSS și cum funcționează.

Simțiți-vă liber să vă jucați cu lăutari, dacă nu înțelegeți pe deplin niciuna dintre ele. Puteți modifica valorile și observați diferența sau mai bine, încercați să utilizați proprietatea poziției pentru a lucra la un proiect personal.

Amintiți-vă că îmbunătățirea la CSS necesită o practică constantă. Așa că continuați să exersați și veți fi mai bine.

Doriți să primiți o notificare când public un articol nou? Click aici.