CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS z-index property




The CSS z-index property applying to each elements that overlap with each other.

The z-index properties enable you to set a event of an overlap. Overlap is easy set the position property and create than advance layout.

z-index value is also support negative value like(-1) only work when with position is absolute set an element.


Property Values


Properties Value Description
Syntax z-index:value;
value   Integer_number
  auto
  inherit
Allow to Positional elements
Inherited No

Example-Code:

<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>
Online Try This Code Your Self....   »

Example Result: