Add z-index for .toast-container (#35859)

* Add z-index for .toast-container

- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better

Fixes $34028

* Remove unnecessary z-index from docs examples

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 0a2d6ec875c8f7e29295ae388077625576b84198..889a936851a1886fb0ed817d7b9a049cebf848e4 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -20,6 +20,8 @@
 }
 
 .toast-container {
+  position: absolute;
+  z-index: $zindex-toast;
   width: max-content;
   max-width: 100%;
   pointer-events: none;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 566c967b94e58ff22233128576a3eaf97f2adb48..5dd78ae2a8223afcfdc9f39eb1edbe22dc2e3ec7 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1041,6 +1041,7 @@ $zindex-modal-backdrop:             1050 !default;
 $zindex-modal:                      1055 !default;
 $zindex-popover:                    1070 !default;
 $zindex-tooltip:                    1080 !default;
+$zindex-toast:                      1090 !default;
 // scss-docs-end zindex-stack
 
 

diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 10093b6bc6df68a86d4aca23183c900d38c95bd9..e8a91909589d0539645027a69d7532b1518e5753 100644 (file)
--- a/site/content/docs/5.1/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -49,7 +49,7 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a
 
 Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
   <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
 ```html
 <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
   <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <img src="..." class="rounded me-2" alt="...">
@@ -122,7 +122,7 @@ Toasts are slightly translucent to blend in with what's below them.
 You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
 
 {{< example class="bg-light" >}}
-<div class="toast-container">
+<div class="toast-container position-static">
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}