Pozitionare css, pozitionarea elementelor – Tutorial pozitionare

Css-ul ofera 4 tipuri de pozition are a elementelor pe pagina. Acestea sunt: pozitionarea fixa, pozitionarea relativa, absoluta si pozitionarea statica. Comportamentul obisnuit al elementelor, al tagurilor html in cadrul unei pagini, daca nu specificam o pozitionare, atunci este pozitionarea statica. Directivele, (left, right etc.) adica stanga, dreapta, jos si sus se comporta diferit in functie de tipul pozitionarii. Haideti sa vedem diferentele intre tipurile de pozitionare.
Atentie! Aveti grija cu pozitionarea, pentru ca aceasta directiva cauzeaza de obicei cele mai multe probleme, din cauza ca anumite browsere, de ex: Internet Explorer, multe ori nu respecta anumite reguli standard!

Pozitionarea statica

Pozitionarea statica, asa cum am mai mentionat, este pozitionarea default, adica elementele se pozitioneaza in functie de loc liber si in functie de ordine, dupa citirea normala a codului html pe o pagina. Ast a este interpret area obisnuita a browserului. Daca vreti sa experimentati cu aceasta pozitionare, tot ce trebuie sa faceti, este sa scrieti cod html fara a specifica orice tip de pozitionare.

Pozitionare fixa – (Fixed Positioning)

Pozitionarea fixa este folosita mai rar, dar uneori este foarte utila. Daca folosim pozitionare fixa, elementul respectiv va fi pozitionat relativ de fereastra, si nu se va misca chiar daca vom face scroll la pagina. Elementul la care adaugam pozitionare fixa nu va lua parte din curgerea normala a paginii, deci nu va fi afectata de restul codului.
Atentie! – In caz daca pagina respectiva va fi vizualizata cu Internet Explorer 7,8 – la inceputul documentului trebuie specificat un !DOCTYPE ca sa functioneze corect pozitionarea absoluta.

Exemplu pentru cod:

p
{
position:fixed;
top:50px;
right:10px;
}

Acest cod de mai sus va face ca paragraful sa fie pozitionat la o distanta de 50 de pixeli din partea de sus a ferestrei, si 10 pixel din dreapta.

Pozitionare relativa – cu css

Pozitionarea relativa inseamna o pozitionare care ia in considerare pozitia originala (pozitia default) al elementului. Adica – daca avem de a face cu un element care are padding, sau un margin predefinit, cand vom suprascrie pozitia elementului specificand o alta pozitie cu pozitie relativa, elementul respectiv va fi pozitionat relativ de pozitia anterioara, pozitia originala, care urma sa fie aplicata daca nu specificam altfel, nu am fi suprascris pozitia. Ca sa fie mai clar, haideti sa vedem un exemplu.
Prima data haideti sa vedem un titlu, un tag H1, ca sa vedem cum este pozitionat default, iar dupa aceea sa vedem cum se comporta cand suprascriem cu pozitionare relativa.

Exemplu:

h1 cu pozitionare default(original) al acestei pagini

Suprascris cu pozitionare relativa

h1
{
position:relative;
left:40px;
}

h1 cu pozitionare relativa, 40px stanga

Pozitionare absoluta – cu css

Pozitionarea absoluta este o pozitionare destul de des folosita. O pozitionare absoluta inseamna pozitionarea elementului relativ la elementul parinte la care deja s-a definit o pozitionare. Daca elementul parinte nu a fost pozitionat, adica are o pozitionare statica, atunci elementul parinte este considerat tagul html, adica pagina in sine.
Atentie! – ca sa functioneze corect pozitionarea absoluta, elementul parinte trebuie sa aiba proprietatea de pozitionare definita, si nu are voie sa fie pozitionat static.

<div style="position:relative; margin-bottom:80px;">
<p style="position:absolute;left:60px;
background-color:#000000;color:#FFFFFF;">
Acest paragraf a fost pozitionat cu pozitionare absoluta la 60 de pixeli de la partea stanga a elementului parinte care este un div pozitionat relativ
.
</p>
</div>

Acest paragraf a fost pozitionat cu pozitionare absoluta la 60 de pixeli de la partea stanga a elementului parinte care este un div pozitionat relativ.

Cu pozitionarea elementelor foarte probabil ca va veti bate capul din cand in cand, si asta va fi dupa cum am mai mentionat mai ales din cauza browserelor diferite, tocmai de aceea va recomand sa testati orice de sign faceti in fiecare browser mai cunoscut, ca sa nu va treziti mai tarziu cu surprize.

Lasă un răspuns

(*)


*