In HTML, elements have a certain stacking order that specifies the arrangement in which elements are positioned. The rule defined for element positioning is that the element that has a higher stacking order is positioned in front of the element with lower stacking order. A stack order of an element can exhibit both positive and negative values.
What is z-index property in CSS
The z-index property defines the stack order of HTML elements in a way that it specifies which element will be displayed in front and which element is displayed in the background.
Syntax
The z-index property can exhibit certain properties that are explained in detail below.
| Value | Description |
| auto | This value sets the stack order of elements equal to that of their parent elements. |
| number | This value is used to manually give a stack order to an element. The stack order can exhibit both positive and negative values. |
| initial | This value sets the stack order of an element to its default value. |
| inherit | This value sets the stack order of an element according to the properties that the element inherited from its parent element. |
Here we have illustrated the z-index property with the help of some examples.
Example 1
Suppose you want to provide a background image on your website and you want your other elements to be displayed in front of that image. Use the following code snippet.
HTML
In the above example, there are two elements one is an <h2> element and the other is an <img> element.
CSS
position: relative;
left: 200px;
top: 0px;
}
img {
z-index: -1;
position: absolute;
left: 200px;
top: 0px;
}
The <img> element is positioned in the background of the <h2> element because the z-index property assigned to the <img> element is -1. Furthermore, the <h2> element is relatively positioned 200px from the left and 0px from the top, whereas, <img> element has an absolute position which means that it will be placed 200px from the left and 0px from the top, with respect to the position of its ancestor element <body>.
Output
Here is an output of the above example.
Both the elements successfully stacked.
Now if we remove the z-index value from the <img> element, then the <img> will be placed in front of the <h2> element because <img> is defined last in the document flow.
/*z-index: -1;*/
position: absolute;
left: 200px;
top: 0px;
}
Output
Now the <h2> element is placed behind the <img> element.
Example 2
In this example we have demonstrated the usage of positive z-index value, moreover, in this example we have illustrated how to place an element behind a certain element. Here two <div> elements are being created.
HTML
The first div has a relative position which means that it will be positioned 20px from left and 10px from the top relative to its original position, moreover, we have assigned it a z-index value of 1.
z-index: 1;
position: relative;
left: 20px;
top: 10px;
border: 3px solid gray;
height: 100px;
width: 300px;
}
For the second div we have assigned it an absolute position which means that it will be placed 100px from the left and 60 px from the top with respect to the position of its parent element.
position: absolute;
left: 100px;
top: 60px;
background-color: indianred;
height: 80px;
width: 200px;
}
Output
Div 2 successfully stacked behind Div 1.
Points to remember!
1. You need to define the position of elements or else the z-index property will not work. (Elements can have absolute, relative, fixed, or sticky positions).
2. Without specifying the z-index property, if two elements lap over one another, then the element that is defined last in the document flow is positioned in front of the other element.
Conclusion
The z-index property is used to set the stacking order of HTML elements, which means it specifies the arrangment of the elements being displayed on the web page. The z-index property exhibits four values which are; auto that sets the stack order of elements equal to that of their parent elements, number is used to manually give a stack order to an element, initial sets the stack order of an element to its default value, and inherit sets the stack order of an element according to the properties that the element inherited from its parent element. This post discusses the z-index property in depth with the help of suitable examples.
