Tutorial Bigbos: Tutorial HTML pe intelesul tuturor,tutoriale html, coduri html, culori html, tabele, liste html, formulare, coduri muzica, coduri video, tutorial xhtml, tutorial css,Tutoriale de initiere in HTML si coduri HTML explicate


Du-te la cuprins

Pozitionare

CSS > Aprofundare

  • 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.


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



Valorile lui top si left pot fi deasemenea negative.



Folosind aceasta pozitionarea relativa pot fi suprapuse mai multe emente.



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 <html>.

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.



  • 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.



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.

Home Page | HTML | CSS | Tag-uri | Formulare HTML | Tutoriale Video | Download | Contact | Harta site


Submeniu:


Inapoi la cuprins | Inapoi la meniul principal