z-index

  The z-index property decides order in which the elements are displayed in the web page. This property is useful to create layers for the document. This property gives the third dimension to the element. The element having z-index property will be displayed above or in background of other element.

Syntax

z-index: <numeric value>;

There are two values for the z-index auto and “numeric value” or order. The higher the numeric value the more the element is on the top of the other element. Lower(negative also) the value more element is displayed behind the other elements.

  This property works with position property.

Following is the code example of the z-index property:

<div id="zid1" style="border: 1px solid; height: 200px; position: relative; right: 0px; width: 200px;">

<div id="zid2" style="background-color: red; border: 1px solid; height: 100px; position: relative; width: 125px; z-index:10;">

Div 1

</div>

<div id="zid3" style="background-color: green; border: 1px solid; height: 100px; left: 20px; position: relative; top:-50px;  width: 125px;  ">

Div 2

</div>

</div>

Following is the output of the above code:
Now here you can see the red box is above the green box. This is because the z-index property of the element is set to 10.

Div 1

Div 2