Difference between auto, 0, and no z-index in CSS
When we have to order elements on the z-axis, we use the z-index property. in CSS, the z-index property only works on elements with a position value other than static. In this article, we will learn about the z-index property and its values, auto, number, initial and inherit. We will also see the difference between all the values.
Syntax:
z-index: auto | integer | initial | inherit;
Properties: This property has the following values as mentioned above and described below.
- auto: It sets the stack order equal to to its parents. This is the default value.
- integer: It sets the stack order of the element. We can also use negative numbers.
- initial: It sets this property to its default value.
- inherit: It inherits this property from its parent element.
Note: The z-index property does not work on static position elements.
The following examples will help to understand the differences between the values of the property.
Example 1: In this example we will use the z-index property on on element.
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> .box { width: 170px; height: 170px; border: 2px solid black; } #box-1 { top: 69px; position: relative; background-color: rgb(0, 126, 42); z-index: auto; } #box-2 { top: 34px; position: relative; background-color: rgb(175, 13, 13); } </style> </head> <body> <div class="box" id="box-1"></div> <div class="box" id="box-2"></div> </body> </html> |
Output:
Example 2: In this example, we will use the z-index property on both the elements.
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> .box { width: 170px; height: 170px; border: 2px solid black; } #box-1 { top: 69px; position: relative; background-color: rgb(0, 126, 42); z-index: auto; } #box-2 { top: 34px; position: relative; background-color: rgb(175, 13, 13); z-index: auto; } </style> </head> <body> <div class="box" id="box-1"></div> <div class="box" id="box-2"></div> </body> </html> |
Output: We can clearly see that there is no difference between z-index auto and no z-index.
Example 3: When we specify the z-index as 0, it creates a stacking context.
HTML
<!DOCTYPE html> <html lang="en"> <head> <style> .z { position: relative; width: 100px; height: 100px; top: 40px; left: 40px; } .red { background: red; } .green { background: green; } .blue { background: blue; } #example2 { margin-top: 30px; } </style> </head> <body> <div id="example1"> <div class="z red"> <div class="z green" style="z-index: 1"></div> </div> <div class="z blue"></div> </div> <div id="example2"> <div class="z red" style="z-index: 0"> <div class="z green" style="z-index: 1"> </div> </div> <div class="z blue"></div> </div> </body> </html> |
Output:
Explanation of the examples: In the first example, we can see that green is positioned above blue and red, this is due to the reason that the color green has z-index 1. Hence a stacking context is created.
But in the second example, green is positioned above red but below blue due to the reason that red has z-index 0. Hence a stacking context is created at the same level as blue.
Please Login to comment...