CSS Positions – Static, Relative, Absolute, Fixed

CSS Position

Orice web designer/web developer a auzit cel putin o data de CSS position. De obicei web designerii in formare, nu inteleg foarte bine diferenta dintre cele 4 tipuri de pozitionare, iar aceasta poate rezulta in imposibilitatea de a crea un site corect functional.

Sintaxa:

{ position: static; } – Position static

{ position: relative; } – Position relative

{ position: absolute; } – Position absolute

{ position: fixed; } – Position fixed

Intelegerea tipurilor de pozitionare a elementelor

1. Position Static

Este pozitia default a elementului. Daca avem mai multe elemente diferite in pagina, acestea nu au valori diferite ale pozitionarii, ci toate pornesc cu valoarea “static”. Position static inseamna ca elementul va avea un flow normal pe pagina. Singurul motiv pentru care ai vrea sa setezi  position: static;  unui element, este pentru a suprascrie pozitia elementului, care era setata de dinainte de alt developer.

2. Position Relative

Aceasta pozitionare da batai de cap multor web designeri/web developeri si este cel mai greu de inteles. Daca setezi  position: relative; unui element, dar fara alte atribute ca: top, right, bottom, left pentru a manipula pozitia elementului, nu va avea niciun efect vizibil. Va ramane la fel ca si cand ar avea setata position: static. Dar daca setezi atribute ca bottom: 20px;, elementul se va muta in pagina cu 20 pixeli mai sus fata de pozitia lui initiala. Schimbarea pozitiei unui element in pagina dupa preferintele tale, este foarte importanta si utila, fiind totodata foarte des folosita de web designeri si web developeri.

Daca setezi position: relative; pe un element, automat poti sa-i setezi si z-index-ul, care nu functioneaza cu position: static;.

Z-index – stabileste ordinea elementelor in pagina. Imagineaza-ti elementele site-ului tau asezate tri-dimensional in pagina. Daca un element are setat z-index: 999; fata de celelalte elemente care au z-index: 0, acela va aparea cel mai aproape de tine. Ex: Daca avem doua div-uri identice ca si continut, unul cu z-index: 10; si celalalt cu z-index: 15;, cel care are valoarea mai mare va fi vizibil, deoarece este deasupra celuilalt, iar datorita faptului ca sunt identice ca si continut, cel cu z-index mai mic se ascunde sub celalalt cu valoarea mai mare.

3. Position Absolute

                Este pozitionarea care iti permite sa plasezi elementul in pagina exact in locul in care doresti. Trebuie doar sa folosesti atributele top, right, bottom si left pentru a modifica pozitia     elementului in pagina. Aceste valori vor fi relative pentru urmatorul element parinte cu pozitionare relative sau absolute. Daca elementul parinte nu exista, atunci va deveni default pentru pagina intreaga , adica va fi pozitionat relative la pagina in sine (position: relative).

                Cel mai important lucru de stiut este ca elementele cu position: absolute; nu se mai incadreaza in  flow-ul elementelor paginii.

                Un element pozitionat astfel (absolute) nu este influentat/afectat de alte elemente, si nu afecteaza alte elemente.

                Folosirea gresita a acestei reguli de CSS, poate limita flexibilitatea site-ului tau.

4. Position Fixed

                Aceasta pozitionare este destul de rar intalnita, dar are importanta si utilitatea ei. Un element   care are setat position: fixed, este pozitionat relative la viewport sau browser. Doar ca viewport-ul nu se schimba in momentul in care dai scroll pe pagina. Mai pe scurt, elementul (continutul) ramane fixat pe pagina, exact in locul in care i-ai setat tu pozitia, chiar daca folosesti scroll-ul, el   va fi vizibil in continuare. Ex: http://learnlayout.com/position-example.html       – Observi ca footer-ul nu isi modifica pozitia chiar daca dai scroll pe pagina, deoarece are setat position: fixed;.

                Sper ca a fost de ajutor acest articol, sau macar te-a facut sa intelegi diferentele dintre pozitionari. Dar nu este de ajuns sa cunosti doar teoria acestor concepte, deoarece, in domeniul acesta practica este cea mai importanta. Asa ca nu mai sta pe ganduri! Click aici, pentru a pune in practica ce ti-a fost prezentat in acest articol si pentru a verifica si vizual fiecare modificare si efect rezultat in functie de pozitionarea aleasa.