Bootstrap 5 Z-index
Last Updated :
30 Jan, 2023
In this article, we will learn about Bootstrap 5 z-index. It is a CSS property that is used to control the stacking order of elements on a web page. Elements with a higher z-index value will appear on top of elements with a lower z-index value. The z-index property is used to control the layering of elements in a web page, such as modals, dropdowns, and other elements that can overlap other elements.
Bootstrap 5 z-index classes:
- z-index-n2: This class represents z-index: -2.
- z-index-n1: This class represents z-index: -1.
- z-index-0: This class represents z-index: 0.
- z-index-1: This class represents z-index: 1.
- z-index-2: This class represents z-index: 2.
- z-index-3: This class 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<link href=
rel="stylesheet"/>
<link href=
rel="stylesheet"/>
<script src=
</script>
</head>
<body>
<center>
<div>
<h1 class="text-success">GeeksforGeeks</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-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:
Example 2: Below example demonstrates the z-index-3, z-index-n2, and z-index-n1 classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
<link href=
rel="stylesheet"/>
<link href=
rel="stylesheet"/>
<script src=
</script>
</head>
<body>
<center>
<div>
<h1 class="text-success">GeeksforGeeks</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:
Reference: https://getbootstrap.com/docs/5.3/utilities/z-index/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...