Bootstrap/site/content/docs/5.1/layout/z-index.md

---
layout: docs
title: Z-index
description: While not a part of Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.
group: layout
---

Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.

We don't encourage customization of these individual values; should you change one, you likely need to change them all.

{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
Rewrite grid docs to account for new grid tier - Breaks grid content across multiple pages - Updates mentions of grid tiers from five to six - Rewrites how it works sections to reference new options and tiers 2020-04-02 20:44:07 +02:00			`---`
			`layout: docs`
			`title: Z-index`
			`description: While not a part of Bootstrap's grid system, z-indexes play an important part in how our components overlay and interact with one another.`
			`group: layout`
			`---`

			Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.

			These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+.

			`We don't encourage customization of these individual values; should you change one, you likely need to change them all.`

Update docs for new XXL grid tier - Updates mentions of number and exact tiers - Updates grid example to include xxl container - Adds some scss-docs references - Cleans up other grid mentions and docs - Updates navbar example to include an expand at XXL variant 2020-04-13 23:40:47 +02:00			`{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}`
Rewrite grid docs to account for new grid tier - Breaks grid content across multiple pages - Updates mentions of grid tiers from five to six - Rewrites how it works sections to reference new options and tiers 2020-04-02 20:44:07 +02:00
			To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.