Z-index
Z-index utilities control which overlapping element appears on top.
In this page:
Syntax
<div class="position-relative z-1">above</div>
<div class="position-relative z-n1">below</div>Z-index
Utilities .z-n1, .z-0, .z-1, .z-2 and .z-3 set the stacking order for positioned elements. Bootstrap's own components use higher values so dropdowns, modals and tooltips appear above content. z-index only works on positioned elements or flex and grid items.
Note:
z-index needs a position other than static to take effect.
Example: Z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container position-relative" style="height: 7rem">
<div class="position-absolute top-0 start-0 bg-primary text-white p-4 z-1">z-1 (bottom)</div>
<div class="position-absolute top-0 start-0 bg-danger text-white p-4 z-3" style="margin:1.5rem 0 0 2.5rem">z-3 (top)</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using z-index on static elements
- Huge custom values
- Fighting Bootstrap components stacking
Chapter Summary
- z-n1, z-0, z-1, z-2, z-3
- Works on positioned elements
- Components use higher built-in values
- Avoid large custom values
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: