CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS z-index Property - How does z-index layer really work?


CSS layer refer to applying z-index property to element that overlap to another element.

CSS z-index property set a overlap value and base on overlap value to element positioning set from each other.

CSS z-index property always work with absolute as well as relative positioning value.

CSS z-index possible value 0, positive (1 to 9999) and negative (-1 to -9999) value to set an element.

Property Value Description
z-index z-index:9999;     /* top most layer*/
z-index:1;
z-index:0;
z-index:-9999;   /* bottom last layer*/
Set z-index layer value to know how to overlap each other.

Example Code:

<body>
	<div style="background-color:orange;
		width:130px;
		height:150px;
		top:15px;
		left:100px;	
		position:relative;
		z-index:1;">
	</div>
	<div style="background-color:#FF3333;
		width:130px;
		height:150px;
		position:relative;
		top:100px;
		left:45px;
		z-index:2;">
	</div>
	<div style="background-color:#CCFF66;
		width:230px;
		height:70px;
		position:relative;
		top:-270px;
		left:145px;
		z-index:3;">
	</div>
</body>

Run it...   »

Example Result: