point.comThe z-index Property in CSS
The z-index property in CSS determines the stacking order of elements in a webpage. In other words, it controls which element appears on top of another when they overlap. It only works on positioned elements, that is, elements that have a position value other than static.
Syntax
selector {
z-index: value;
}
- selector: The HTML element that you want to style (div, span, p, etc.)
- value: The stacking order of the element. It can be a positive integer, negative integer, or zero.
- auto: The default value. The elements are stacked in their source order. The element that comes last in the HTML code will be on top of the others (stacked from bottom to top).
- number: A positive or negative integer. It represents the stacking order of an element.
- The higher the number (10, 100, etc. ), the higher the element will be on the top of the other elements with lower values.
- Negative values (-1, -10, etc.) will place the element behind other elements.
- Zero (0): The element will be in its default stacking order. If it shares the same stacking context as other elements, it will be stacked on top of them.
How z-index Works
- By default, the HTML elements are stacked in the order they appear in the HTML code. The last element in the HTML code will be on top, and the first element will be at the bottom (bottom to top stacking order).
- The z-index property works within a stacking context. A stacking context is a container that is created by the elements with certain properties like position, opacity, etc. The elements inside a stacking context are stacked according to their z-index value.
- Higher z-index values: The element with the higher z-index value will be stacked on top of elements with lower z-index values. For example, an element with z-index: 10 will be on top of an element with z-index: 1.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
position: relative;
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
z-index: 1;
}
.box2 {
background-color: blue;
z-index: 0;
}
</style>
</head>
<body>
<div class="box1">Box 1 (Front)</div>
<div class="box2">Box 2 (Back)</div>
</body>
</html>
Example : Using Negative z-index
div {
position: relative;
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
z-index: -1; /* This box will be behind other elements */
}
.box2 {
background-color: blue;
z-index: 1; /* This box will be on top */
}
Example : z-index with Multiple Overlapping Elements
div {
position: relative;
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
z-index: 3;
}
.box2 {
background-color: blue;
z-index: 2;
}
.box3 {
background-color: green;
z-index: 1;
}
Stacking Contexts and z-index
Stacking context is formed by elements with position value of relative, absolute, fixed, or sticky, or when certain properties are applied like opacity (less than 1), transform, and filter.
Elements in different stacking contexts cannot be compared by z-index. When you apply z-index to elements in different stacking contexts, it will not affect their overlap.
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
