diff --git a/packages/yoga/src/Snackbar/web/Snackbar.jsx b/packages/yoga/src/Snackbar/web/Snackbar.jsx
index e90a0a1764..27e16326e9 100644
--- a/packages/yoga/src/Snackbar/web/Snackbar.jsx
+++ b/packages/yoga/src/Snackbar/web/Snackbar.jsx
@@ -13,6 +13,15 @@ import Button from '../../Button';
 import Icon from '../../Icon';
 import Text from '../../Text';
 
+function getMaxZIndex() {
+  return Math.max(
+    ...Array.from(document.querySelectorAll('body *'), el =>
+      parseFloat(window.getComputedStyle(el).zIndex),
+    ).filter(zIndex => !Number.isNaN(zIndex)),
+    0,
+  );
+}
+
 const IconButtonWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -69,7 +78,7 @@ const StyledSnackbar = styled.div`
 
       background-color: ${snackbar.variant.color[variant]};
 
-      z-index: 100;
+      z-index: ${getMaxZIndex() + 1};
     `}
 
   ${media.md`
diff --git a/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap b/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
index 5483865d0e..37111b3b60 100644
--- a/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
+++ b/packages/yoga/src/Snackbar/web/__snapshots__/Snackbar.test.jsx.snap
@@ -99,7 +99,7 @@ exports[`<Snackbar /> should match snapshot 1`] = `
   border-radius: 8px;
   box-shadow: 0 2px 4px -1px rgba(152,152,166,0.2),0 4px 5px 0px rgba(152,152,166,0.14),0 1px 10px 0px rgba(152,152,166,0.12);
   background-color: #C1EEDB;
-  z-index: 100;
+  z-index: 1;
   -webkit-animation: bcCCNc 0.2s ease-in-out;
   animation: bcCCNc 0.2s ease-in-out;
 }