2.3 KiB
title |
---|
Z Index |
Z Index
Z Index (z-index
) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.
Note: Z index only works on positioned elements (position:absolute
, position:relative
, or position:fixed
).
Possible Values
/* Default value if not specified */
z-index: auto;
/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
Example Usage
In this example, you can see three boxes displayed on top of each other in different orders using z-index
.
HTML
<div class="container">
<div class="box" id="blue"></div>
<div class="box" id="red"></div>
<div class="box" id="green"></div>
</div>
CSS
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
Since z-index
wasn't defined, it will have a default value of auto
. This is a result:
Try to change the order to Green, Blue, Red in CSS using z-index
.
#blue {
background-color: blue;
z-index: 2;
}
#red {
background-color: red;
z-index: 1;
}
#green {
background-color: green;
z-index: 3;
}
Your result will be:
Use Z Index if you need to put a background element below a container. You can easily place the background under every element by giving it a negative Z Index like below:
#background {
z-index: -1;
}
More Information:
https://css-tricks.com/almanac/properties/z/z-index/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/