diff options
| author | Mark Otto <[email protected]> | 2016-10-27 09:39:27 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2016-10-27 09:39:27 -0700 |
| commit | 5b266437e76db8b34ac601ded2b0e276a883e700 (patch) | |
| tree | 5661d4de225ce4c331e7384ee6f5c8c364b1fb74 | |
| parent | 8ed7ebcd6344943edf68fd6d8a159190eb105a34 (diff) | |
| parent | 115a37db1a21dd249daf852cbd71cbd5ad1b7c3f (diff) | |
| download | bootstrap-5b266437e76db8b34ac601ded2b0e276a883e700.tar.xz bootstrap-5b266437e76db8b34ac601ded2b0e276a883e700.zip | |
Merge pull request #21027 from twbs/document-zindex
Document zindex
| -rw-r--r-- | docs/layout/overview.md | 20 | ||||
| -rw-r--r-- | scss/_modal.scss | 2 | ||||
| -rw-r--r-- | scss/_variables.scss | 6 |
3 files changed, 24 insertions, 4 deletions
diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 3e6c7e7e0..c22203fde 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-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !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 39554581d..f44cc7b32 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 ecb79d1ba..cafd887c1 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 |