rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases 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
commit 5b266437e7
3 changed files with 24 additions and 4 deletions
Show Stats 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 %}
@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.

2
scss/_modal.scss
View File

@ -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

6
scss/_variables.scss
View File

@ -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