Vetia z-index

Vetia z-index vendos se kush do të jetë në krye në rast se disa elemente mbivendosen njëri me tjetrin.

Sintaksa

përzgjedhësi {
	z-index: numër | auto;
}

Numri duhet të jetë i plotë, pozitiv ose negativ. Mund të jetë zero.

Vlerat

Vlera	Përshkrimi
Numër	Numri i plotë vendos rendin e mbivendosjes së elementeve: gjatë mbivendosjes së elementeve njëri mbi tjetrin, në krye do të jetë ai, te i cili `z-index` është më i madh.
`auto`	Rendi i mbivendosjes ndërtohet automatikisht: më lart do të jetë ai element, i cili ndodhet më poshtë në kodin HTML.

Vlera e parazgjedhur: auto.

Shembull

Në këtë shembull, blloqet do të mbivendosen njëri mbi tjetrin në rendin e ndjekjes së tyre në kodin HTML (z-index nuk është vendosur dhe do të ketë vlerën e parazgjedhur - auto). Blloku i parë do të jetë në fund (i kuq), dhe i fundit - më lart nga të gjithë (i gjelbër):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

Shembull

Të ndryshojmë rendin e mbivendosjes, duke vendosur z-index. Bllokut të kuq - 3, të kaltrit - 2, të gjelbërit - 1. Rendi i mbivendosjes do të ndryshojë në të kundërtën (më lart nga të gjithë do të jetë blloku me z-index 3):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}