Bootstrap Z-index scales provide a new axis to arrange the content on the screen. It plays a very important role in how components interact with one another. A component with a higher z-index value is always in front of the component with a lower z-index value. Z-index in Bootstrap is of two types Component Elements and Overlay Elements.
- Component elements: Buttons groups, input groups, and pagination are built with overlapping elements to prevent double borders. They have a z-index from a scale of 1 to 3. 1 hover, 2 is active, and 3 is the focus.
- Overlay components: Dropdowns, navbars, modals, tooltips, and popovers include the highest z-index. Their z-index scale begins with 1000. Each overlay component increases its z-index in such a way that user-focused or hovered or active elements remain in view all the time.
Syntax :
<div class="z-index-*">...</div>
The ‘*’ is replaced by n2, n1 , 0 , 1, 2, master. n2, n1 are -2 and -1 respectively and the master is 1090 which is the highest z-index.
Example 1: This example demonstrates z-index-n1 which represents z-index: -1 and z-index-2 which represents z-index: 2.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Approach z-index scales</h2>
</div>
<br><br>
<div class="container">
<div class="z-index-n1 bg-primary
position-absolute h-25">
Javascript
</div>
<div class="z-index-2 bg-danger
position-absolute">
CSS
</div>
</div>
</body>
</html>
|
Output :
Example 2: This example demonstrates z-index-master which represents z-index: 1090 (highest z-index).
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Approach z-index scales
</strong>
</div>
<br><br>
<div class="container">
<div class="z-index-master border
position-absolute h-25">
HTML
</div>
<div class="z-index-2 border
position-absolute">
CSS
</div>
</div>
</body>
</html>
|
Output:
References : https://getbootstrap.com/docs/5.0/extend/approach/#z-index-scales
Recommended Articles