CSS - Pozitionare.

Pozitionarea elementelor este de patru tipuri..

- statica
- fixa
- relativa
- absoluta

CSS - Pozitionare statica
Pozitionarea statica este valoarea standard in browser atribuita unui element cand vine vorba de pozitionare..


--------------------------------------------------------------------------------

CSS - Pozitionare fixa
Folosind valuarea "fixed" pentru atributul "position" vom obtine un element pe pagina care are o pozitie fixa indiferent de celelalte elemente. Cu altea cuvinte elementul pluteste in pozitia stabilita chiar daca dam de rotita mouseului. Folosind valoarea "fixed" elementele se pot suprapune, celelalte elemente comportanduse ca si cand elementul fix nu ar exista..

.pozitie_fixa {
position:fixed;
top:25px;
right:10px;
}

Mentiune:
IE nu interpreteaza acest atribut daca nu este specificat un !DOCTYPE..


--------------------------------------------------------------------------------

CSS - Pozitionare relativa
Pozitionarea relativa se refera la o pozitie diferita fata de pozitia statica .

.pozitionare_relativa {
position:relative;
left:15px;
top:30px;
}

Valorile lui top si left pot fi deasemenea negative..

.pozitionare_relativa{
position:relative;
left:-15px;
top:-30px;
}

Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe emente..

Acest element are o pozitionare statica

Titlul va fi urcat mai sus fata de pozitia initiala

Note: Trebuie mentionat ca spatiul corespunzator elementului, va fi pastarat

De multe ori pozitionarea relativa sau div-urile pozitionate relativ sunt folosite ca si container pentru alte divuri sau elemente pozitionate absolut..


--------------------------------------------------------------------------------

CSS - Pozitionare absoluta
Elementele pozitionate absolut vor fi pozitionate in functie de primul alement parinte care are o pozitionare non-statica. Daca nu este gasit un astfel de element, elementul parinte va fi considerat ..

Spatiul rezervat elementelor pozitionate absolut nu va fi pastrat. In acest sens celelalte elemente se comporta ca si cand elementul pozitionat absolut nu ar exista. In felul acesta se pot suprapune mai multe elemente..

p
{
position:absolute;
left:200px;
top:200px;
}

Suprapunerea mai multor elemente in CSS
Cu ajutorul CSS pot fi suprapuse mai multe elemente..

Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative..





&

Suprapunerea mai multor elemente in CSS

Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.

Datorita faptului ca "z-index"-ul imagini are valoarea -1, imaginea va fi pozitionata in spatele textului. De aici regula ca un element cu "z-index" mai mare va fi pozitionat in fata unui element cu "z-index" mai mic.