Advertisement
Google Ad Slot: content-top
CSS Z-index
The z-index property in CSS controls the stacking order of elements along the z-axis (i.e., front-to-back order). It determines which elements appear in front of or behind other elements on the page.
Syntax:
z-index: <value>;
Value:Positive, negative, or 0 (e.g., 1, 100, -1).
Example
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1; /* Behind */
}
.box2 {
position: absolute;
top: 80px;
left: 80px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2; /* In front */
}
</style>
<div class="box1"></div>
<div class="box2"></div>
Rule of using Z-index
The element must have a position value of:relative,absolute,fixed,sticky
Elements with a higher z-index will appear in front of elements with a lower z-index.