z-index property in Bootstrap controls the stacking order of elements on a webpage.<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
Use z-index utilities to stack elements on top of one another.
<!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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-zindex-levels position-relative">
<!-- Example Code -->
<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
<!-- End Example Code -->
</body>
</html>
z-index is used to define the stacking order of positioned elements.z-index value will be stacked above elements with lower values.static and a z-index value other than auto.The z-index property is commonly used when you have overlapping elements and need to control their order in the stacking context.
z-index only affects elements that have a position value other than static (e.g., relative, absolute, fixed).z-index values, as it can lead to unexpected behavior and may make the page harder to maintain.In summary, the z-index property in Bootstrap is a powerful tool for controlling the stacking order of elements on a webpage. Understanding how to use it correctly is essential for managing the visual hierarchy of your web page.