In this blog I am trying to explain the z-index in CSS3.
Z-Index: The z-index sets the stacking level of an element. An element with greater stack order is always in front of an element with a lower stack order. It works only on positioned elements these positions are following:
1. Position: absolute
2. Position: relative
3. Position: fixed
Z-index has three values these are given below:
It is default the value of z-index and it is sets the stack order equal to its parents.
This value is set the stack order of the element. Here is allowed only positive integer value.
Specify that the z-index should be inherited from the parent element.
Z-index will work when the position property is set as well.
<div style="background-color: #CD853F; width: 200px; height: 100px; position: relative;
top: 10px; left: 80px; z-index: 2">
<p style="color: #E5E5E5;">
<div style="background-color: #E5E5E5; width: 200px; height: 100px; position: relative;
top: -60px; left: 35px; z-index: 1;">
<p style="color: #CD853F;">