🎯 CSS z-index Property

The z-index CSS property controls the stacking order of positioned HTML elements on the web page.

It defines which elements appear in front of or behind others in the 3D layer system of a webpage.

The z-index property is essential for managing overlapping elements like modals, dropdowns, tooltips, and sticky components.

• Controls element layering on the page
• Prevents unwanted overlap issues
• Useful for modals, menus, tooltips
• Improves UI structure and usability

The browser automatically determines the stacking order based on the parent element.

div {
    z-index: auto;
}
                

A numeric value defines the stacking order. Higher values appear above lower ones.

.box1 {
    z-index: 10;
    position: relative;
}

.box2 {
    z-index: 100;
    position: relative;
}
                

Elements with higher z-index values appear on top of others.

Resets the property to its default value (auto).

• z-index only works on positioned elements (relative, absolute, fixed, sticky).
• Higher values appear in front of lower values.
• If two elements have the same z-index, the one written later in HTML appears on top.