Bootstrap 5 Approach z-index Scales

Last Updated : 21 Dec, 2022

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= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        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= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        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> 