From 3cc023990369168aa451bf49a69b7fb4a2dcaa67 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:26:23 -0700 Subject: [PATCH 1/2] Document our z-index values Fixes #18532 --- docs/layout/overview.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 3e6c7e7e05..5b5ceb16cb 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath: {% highlight scss %} @include media-breakpoint-between(md, lg) { ... } {% endhighlight %} + +## Z-index + +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. + +We don't encourage customization of these values; should you change one, you likely need to change them all. + +```scss +$zindex-dropdown-backdrop: 990 !default; +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; +$zindex-modal: 1050 !default; +``` + +Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. From 115a37db1a21dd249daf852cbd71cbd5ad1b7c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:31:38 -0700 Subject: [PATCH 2/2] Change variable for modal backdrop zindex, rearrange to be ordered from lowest to highest --- docs/layout/overview.md | 6 +++--- scss/_modal.scss | 2 +- scss/_variables.scss | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 5b5ceb16cb..c22203fde5 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -166,12 +166,12 @@ We don't encourage customization of these values; should you change one, you lik $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; +$zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; ``` Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. diff --git a/scss/_modal.scss b/scss/_modal.scss index 39554581d3..f44cc7b32f 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -64,7 +64,7 @@ right: 0; bottom: 0; left: 0; - z-index: $zindex-modal-bg; + z-index: $zindex-modal-backdrop; background-color: $modal-backdrop-bg; // Fade for backdrop diff --git a/scss/_variables.scss b/scss/_variables.scss index ecb79d1ba5..cafd887c1e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -526,12 +526,12 @@ $dropdown-header-color: $gray-light !default; $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; +$zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // 16. Navbar