mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 16:19:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #21027 from twbs/document-zindex

Browse Source 
Document zindex
This commit is contained in:
Mark Otto
2016-10-27 09:39:27 -07:00
committed by GitHub
parent 8ed7ebcd63 115a37db1a
commit 5b266437e7
3 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/layout/overview.md
View File

@@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath:
{% highlight scss %} {% highlight scss %}
@include media-breakpoint-between(md, lg) { ... } @include media-breakpoint-between(md, lg) { ... }
{% endhighlight %} {% 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.

2
scss/_modal.scss
View File

@@ -64,7 +64,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $zindex-modal-bg; z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg; background-color: $modal-backdrop-bg;
// Fade for backdrop // Fade for backdrop

6
scss/_variables.scss
View File

@@ -526,12 +526,12 @@ $dropdown-header-color: $gray-light !default;
$zindex-dropdown-backdrop: 990 !default; $zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default; $zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default; $zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default; $zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default; $zindex-navbar-sticky: 1030 !default;
$zindex-modal-bg: 1040 !default; $zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default; $zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// 16. Navbar // 16. Navbar