diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 3e6c7e7e05..c22203fde5 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 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