CSS Z-index
Control the stacking order of elements
📚 What is Z-index?
The z-index property controls the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values.
/* Basic z-index example */
.front-element {
position: relative;
z-index: 10;
background-color: red;
}
.back-element {
position: relative;
z-index: 5;
background-color: blue;
}
Output:
Z-index Values
Positive Numbers
Higher values stack on top
z-index: 1, 10, 100;Negative Numbers
Stack behind other elements
z-index: -1, -10;Auto
Default stacking order
z-index: auto;Position Required
Only works with positioned elements
position: relative;🔹 Stacking Context Example
Stacking context controls the vertical order of overlapping elements via z-index. Higher z-index values appear in front, but only within the same stacking context created by properties like position, opacity, or transform. Understanding this is crucial for modals, dropdowns, and tooltips to prevent layering conflicts and ensure predictable UI behavior in complex interfaces.
.container {
position: relative;
height: 200px;
background-color: #f0f0f0;
padding: 20px;
}
.box1 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff6b6b;
z-index: 1;
}
.box2 {
position: absolute;
top: 60px;
left: 80px;
width: 100px;
height: 100px;
background-color: #4ecdc4;
z-index: 3;
}
.box3 {
position: absolute;
top: 90px;
left: 130px;
width: 100px;
height: 100px;
background-color: #45b7d1;
z-index: 2;
}Output:
🔹 Modal and Overlay Example
Modals and overlays require precise stacking control to appear above all content. An overlay covers the viewport with a high z-index (e.g., 1000), and the modal has a higher value (e.g., 1001). This pattern blocks background interaction, focuses user attention, and must include accessibility features like focus trapping and ARIA attributes. Proper implementation enhances UX and is common for forms, alerts, and confirmations.
/* Overlay background */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
/* Modal dialog */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 30px;
border-radius: 8px;
z-index: 1001;
}
/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 15px;
z-index: 1002;
}Output:
🔹 Common Z-index Values
A systematic z-index scale prevents conflicts and ensures consistency. Common ranges: 1-10 for base elements, 100-200 for dropdowns/sticky headers, 500-600 for overlays, and 1000+ for modals/notifications. Using variables (e.g., $z-modal: 1000) and incrementing in steps makes code predictable. Remember, z-index only works on positioned elements and is bounded by its stacking context, requiring careful documentation.
/* Common z-index scale */
.dropdown-menu {
z-index: 100;
}
.sticky-header {
z-index: 200;
}
.tooltip {
z-index: 300;
}
.modal-overlay {
z-index: 1000;
}
.modal-content {
z-index: 1001;
}
.notification {
z-index: 9999;
}