Using z-index Property for CSS Positioning
The z-index property in CSS is used to control the stacking order of positioned elements on a web page. It specifies the z-axis, which determines the depth or elevation of an element relative to other elements in the stacking order.
When elements overlap on a page, the z-index property allows you to control whether one element appears on top of another or behind it. By default, elements have a z-index value of auto, which means they are ordered based on the document tree and the z-index values of their parent elements.
Basic Usage
The z-index property accepts numeric values and can be positive or negative. An element with a higher z-index value appears on top of an element with a lower z-index value.
Consider the following example:
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>By default, both boxes are stacked in the order they appear in the HTML. If we want to change the stacking order and display "Box 2" on top of "Box 1", we can apply the following CSS:
.box-1 {
background-color: red;
z-index: 1;
}
.box-2 {
background-color: blue;
z-index: 2;
}The z-index value of "Box 2" is higher than the z-index value of "Box 1". As a result, "Box 2" appears on top of "Box 1" and is displayed with a blue background color.
Stacking Contexts
Each positioned element creates a stacking context. Elements within a stacking context are stacked relative to other elements within the same context. Stacking contexts can be nested, and the z-index property works within each stacking context.
Consider the following example:
<div class="parent">
<div class="child child-1">Child 1</div>
<div class="child child-2">Child 2</div>
</div>By default, both children elements are stacked in the order they appear in the HTML. However, if we apply the following CSS:
.parent {
position: relative;
z-index: 1;
}
.child-1 {
position: relative;
background-color: red;
z-index: 1;
}
.child-2 {
position: relative;
background-color: blue;
z-index: 2;
}The parent element creates a stacking context with a z-index value of 1. Although "Child 2" has a higher z-index value than "Child 1", it is still stacked behind "Child 1" because they are both within the same stacking context. Changing the z-index value of the parent element affects the entire stacking order within that context.
Using Negative and Floating Values
The z-index property also supports negative and floating point values. Negative values place an element further back in the stacking order, while floating point values allow precise control over the stacking depths of elements.
For example:
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>If we apply the following CSS:
.box-1 {
position: relative;
background-color: red;
z-index: -1;
}
.box-2 {
position: relative;
background-color: blue;
z-index: 1.5;
}"Box 2" has a z-index value of 1.5, which allows it to appear higher in the stacking order than "Box 1" with a z-index value of -1. The floating point value gives us more granular control over the stacking depths of these elements.
Conclusion
The z-index property is a powerful tool for controlling the stacking order of positioned elements in CSS. By specifying different z-index values, you can decide which elements should appear on top of others when they overlap.
For more information and detailed examples, refer to the following resources: