Position si z-index

postat acum 2 ani de Stefanescu Mihai in categorie CSS

Aceasta proprietate permite pozitionarea unui element HTML. Poate pozitiona un element in spatele altuia si poate determina ce se intampla cu continutul unui element cand acesta este prea mare.

Elementele pot fi pozitionate folosind proprietatile top, bottom,  left si right, dar trebuie sa tinem minte ca acestea nu functioneaza daca nu este setata mai intai pozitia elementului si functioneaza diferit in functie de valoarea data positiei.

Exista 4 tipuri de pozitii:

  • Static
  • Fixed
  • Relative
  • Absolute

Acum le voi lua pe rand si le voi explica.

Static

Elementele HTML au position static in mod normal. Un element cu position static este intotdeauna pozitionat ca si orice alt element HTML din pagina.

Elementele cu acest tip de pozitionare nu sunt afectate de proprietatile top, bottom, left si right.

Fixed

Acest tip de positioning permite fixarea pozitiei unui element HTML intr-un loc dat si va ramane acolo indiferent de scroll, iar coordonatele pozitiei acestuia vor fi relative ferestrei browserului.

Puteti folosi top si left impreuna cu position pentru a muta elementul HTML oriunde in pagina (setand left si top fie cu valori pozitive pentru directia normala fie valori negative pentru directia opusa).

<div style="position:fixed;left:0px;top:45px;
            background-color: lightgray;">
Acest div este fixed.
</div>

Relative

Acest tip de position modifica pozitia elementului HTML relativ fata de pozitia lui normala. Deci daca unui element cu position: relative; ii dam un left: 50px; va adauga 50px in partea din stanga elementului.

Putem folosi acest tip de position pentru a suprapune 2 elemente, dar spatiul care ar fi fost ocupat de elementul cu position relative va ramane gol, nu va fi preluat de alt element.

h2.topElement {
    position: relative;
    top: -50px;
}

Absolute

Un element HTML cu position absolute va fi pozitionat la coordonatele specificate calculate relativ fata de coltul stanga-sus al ecranului (similar Java).

Elementele cu position absolute nu sunt luate in calcul printre celelalte elemente, ca si cand nu ar fi acolo, dar vor fi suprapuse acestora.

span{
    position: absolute;
    left: 100px;
    top: 150px;
}

Suprapunere elemente

Cand este folosit position si elementele sunt scoase din parcursul normal al unei pagini web acestea pot fi suprapuse cu usurinta.

Am sa vorbes acum de z-index, proprietatea ce specifica ordinea elementelor suprapuse (In ce ordine vor fi suprapuse elementele).

<div style="background-color:red;
	width:300px;
	height:100px;
	position:relative;
	top:10px;
	left:80px;
	z-index:2">
</div>
<div style="background-color:yellow;
	width:300px;
	height:100px;
	position:relative;
	top:-60px;
	left:35px;
	z-index:1;">
</div>
<div style="background-color:green;
width:300px;
	height:100px;
	position:relative;
	top:-220px;
	left:120px;
	z-index:3;">
</div>

Codul de mai sus va avea urmatorul rezultat:

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!