Sometime you need overlapping HTML elements stacked on each other to create a composite element appearance or a 3d effect. CSS Z-Index property is used to define the absolute position of the HTML elements on each other with respect to their z-index.
X (width) and Y (height) values are used to define horizontal and vertical dimensions of elements. Likewise Z-index is used to define the depth index of multiple elements if they are stacked over each other. It basically defines where an element should appear depth wise.
Z-index can be assigned index value from 0 to 32767. If Z-Index of an element is higher it will appear on top of elements with lesser Z-Index. Two elements having same z-index, the one which is earlier in the HTML code will appear on the top of the other.
When the Z-Index property is set to Auto, Z-Index will be allotted automatically to the HTML elements. The ones appearing earlier will have lower Z-index and later elements have higher Z-Index values making them appear on the top of previous ones.
The CSS Z-Index property is used whenever you have to define layering of elements, 3D look or shadow effect of elements.
Syntax of the CSS Z-Index property is
{POSITION: Auto|Index value (0-32767)}
Example CSS Z-Index
In this example block element <P> and inline element <B> are stylized with CSS. The CSS position property for paragraph is set to relative and that of bold tag is set to absolute. The Z-Index of paragraph tag is greater than that of <B>. This makes the text in <B> hide behind <P> tag.
In the second part of same code two class selectors are created namely face and shadow. face element must appear in front so its Z-Index is given higher value and shadow selector is assigned lower Z-index so that it appears behind face. The top and left values of these two class selectors are defined in such a way that shadow element appears towards right and below the face text to create a shadow effect of text.
Example
<HTML>
<STYLE>
p
{
background-color: blue;
width:100px;
top:20px;
left:50px;
border:1px dotted red;
position:relative;
z-index:2;
}
b
{
width:200px;
background-color:green;
top:20px;
left:50px;
position:absolute;
}
.face
{width:600px;
color:red;
top:100px;
left:220px;
position:absolute;
z-index:7;
}
.shadow
{width:600px;
color:black;
top:102px;
left:220px;
position:absolute;
z-index:3;
}
</STYLE>
<BODY >
<P>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</P><B>It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.</B>
<div class="shadow">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="face">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</BODY>
</HTML>