Bootstrap 5 Z-index
In Bootstrap 5, the z-index property controls the stacking order of elements. It defines the depth of an element along the z-axis, determining which elements appear above others. Higher values place elements closer to the foreground, while lower values move them to the background.
Bootstrap 5 z-index classes:
| Class | Description |
|---|---|
| z-index-n2 | Represents z-index: -2 |
| z-index-n1 | Represents z-index: -1 |
| z-index-0 | Represents z-index: 0 |
| z-index-1 | Represents z-index: 1 |
| z-index-2 | Represents z-index: 2 |
| z-index-3 | Represents z-index: 3 |
Syntax:
<div class="z-index-1 bg-primary position-absolute">
...
</div>
Example 1: Below example demonstrates the z-index-0, z-index-n2, and z-index-n1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>w3wiki</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href=
"https://getbootstrap.com/docs/5.3/assets/css/docs.css"
rel="stylesheet" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<center>
<div>
<h2>Bootstrap 5 z-index</h2>
</div>
<div class="p-3 m-0 border-0 bd-example
bd-example-zindex-levels position-relative">
<div class="z-0 position-absolute bg-dark
p-5 rounded-3">
</div>
<div class="z-n2 position-absolute
bg-primary p-5 rounded-3">
</div>
<div class="z-n1 position-absolute bg-success
p-5 rounded-3">
</div>
</div>
</center>
</body>
</html>
Output:
Bootstrap 5 Z-index Example Output
Example 2: Below example demonstrates the z-index-3, z-index-n2, and z-index-n1 classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>w3wiki</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href=
"https://getbootstrap.com/docs/5.3/assets/css/docs.css"
rel="stylesheet" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<center>
<div>
<h1 class="text-success">w3wiki</h1>
<h2>Bootstrap 5 z-index</h2>
</div>
<div class="p-3 m-0 border-0 bd-example
bd-example-zindex-levels position-relative">
<div class="z-3 position-absolute bg-light
p-5 rounded-3"></div>
<div class="z-2 position-absolute bg-info
p-5 rounded-3"></div>
<div class="z-1 position-absolute bg-error
p-5 rounded-3">
</div>
</div>
</center>
</body>
</html>
Output:
Bootstrap 5 Z-index Example Output