Bootstrap 5 Approach z-index Scales
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" > w3wiki </ 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" > w3wiki </ 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 > |
Contact Us