diff --git a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index b3b124807f2..d817e32f254 100644
--- a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiCollapsibleNav close button can be hidden 1`] = `
 <div>
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -20,7 +20,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
       tabindex="0"
     >
       <p
@@ -58,7 +58,7 @@ exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
 exports[`EuiCollapsibleNav is rendered 1`] = `
 <div>
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -77,7 +77,7 @@ exports[`EuiCollapsibleNav is rendered 1`] = `
       data-test-subj="test subject string"
       id="id"
       role="dialog"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
       tabindex="0"
     >
       <p
@@ -127,7 +127,7 @@ exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 240px;"
+      style="inline-size: 240px; z-index: 6000;"
       tabindex="0"
     >
       <p
@@ -168,7 +168,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
     aria-pressed="true"
   />
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -185,7 +185,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
       tabindex="0"
     >
       <p
@@ -221,7 +221,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
 exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
 <div>
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -238,7 +238,7 @@ exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
       tabindex="0"
     >
       <p
@@ -284,7 +284,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
     />
   </div>
   <div
@@ -298,7 +298,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
 exports[`EuiCollapsibleNav props onClose 1`] = `
 <div>
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -315,7 +315,7 @@ exports[`EuiCollapsibleNav props onClose 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
       tabindex="0"
     >
       <p
@@ -366,7 +366,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
-      style="inline-size: 320px;"
+      style="inline-size: 320px; z-index: 1000;"
     />
   </div>
   <div
@@ -380,7 +380,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
 exports[`EuiCollapsibleNav props size 1`] = `
 <div>
   <div
-    class="css-yux95t-overlayMask"
+    class="css-w7myn3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -397,7 +397,7 @@ exports[`EuiCollapsibleNav props size 1`] = `
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size: 240px;"
+      style="inline-size: 240px; z-index: 1000;"
       tabindex="0"
     >
       <p
diff --git a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index 66c0afe68e6..9c420231890 100644
--- a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-euiTestCss"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
-        style="inline-size: 248px;"
+        style="inline-size: 248px; z-index: 1000;"
       >
         Nav content
       </nav>
@@ -92,7 +92,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
         class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-isPushCollapsed"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
-        style="inline-size: 48px;"
+        style="inline-size: 48px; z-index: 1000;"
       >
         Nav content
       </nav>
diff --git a/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 31c42811dd7..4acbb4f66d2 100644
--- a/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiFlyout is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -24,6 +24,7 @@ exports[`EuiFlyout is rendered 1`] = `
         data-autofocus="true"
         data-test-subj="test subject string"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -63,7 +64,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -80,6 +81,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
         data-autofocus="true"
         id="imaflyout"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -119,7 +121,7 @@ exports[`EuiFlyout props closeButtonPosition can be outside 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -135,6 +137,7 @@ exports[`EuiFlyout props closeButtonPosition can be outside 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -174,7 +177,7 @@ exports[`EuiFlyout props closeButtonProps 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -190,6 +193,7 @@ exports[`EuiFlyout props closeButtonProps 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -229,7 +233,7 @@ exports[`EuiFlyout props hideCloseButton 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -245,6 +249,7 @@ exports[`EuiFlyout props hideCloseButton 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -272,7 +277,7 @@ exports[`EuiFlyout props is rendered as nav 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -288,6 +293,7 @@ exports[`EuiFlyout props is rendered as nav 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -328,7 +334,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom number 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -344,7 +350,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom number 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
         data-autofocus="true"
         role="dialog"
-        style="max-inline-size: 1024px;"
+        style="max-inline-size: 1024px; z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -385,7 +391,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom value and measurement 1
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -401,7 +407,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom value and measurement 1
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
         data-autofocus="true"
         role="dialog"
-        style="max-inline-size: 24rem;"
+        style="max-inline-size: 24rem; z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -442,7 +448,7 @@ exports[`EuiFlyout props maxWidth can be set to a default 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -458,6 +464,7 @@ exports[`EuiFlyout props maxWidth can be set to a default 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -498,7 +505,7 @@ exports[`EuiFlyout props outsideClickCloses 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -514,6 +521,7 @@ exports[`EuiFlyout props outsideClickCloses 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -554,7 +562,7 @@ exports[`EuiFlyout props ownFocus can alter mask props with maskProps without th
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-6kvyas-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -570,6 +578,7 @@ exports[`EuiFlyout props ownFocus can alter mask props with maskProps without th
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 6000;"
         tabindex="0"
       >
         <p
@@ -623,6 +632,7 @@ exports[`EuiFlyout props ownFocus can be false 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -663,7 +673,7 @@ exports[`EuiFlyout props paddingSize l is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -679,6 +689,7 @@ exports[`EuiFlyout props paddingSize l is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -719,7 +730,7 @@ exports[`EuiFlyout props paddingSize m is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -735,6 +746,7 @@ exports[`EuiFlyout props paddingSize m is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-m-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -775,7 +787,7 @@ exports[`EuiFlyout props paddingSize none is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -791,6 +803,7 @@ exports[`EuiFlyout props paddingSize none is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-none-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -831,7 +844,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -847,6 +860,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-s-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -884,6 +898,7 @@ exports[`EuiFlyout props push flyouts renders 1`] = `
 <div
   class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
   data-test-subj="flyout"
+  style="z-index: 1000;"
 >
   <button
     aria-label="Close this dialog"
@@ -907,7 +922,7 @@ exports[`EuiFlyout props sides left is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -923,6 +938,7 @@ exports[`EuiFlyout props sides left is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-left-left"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -962,7 +978,7 @@ exports[`EuiFlyout props sides right is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -978,6 +994,7 @@ exports[`EuiFlyout props sides right is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1018,7 +1035,7 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1034,7 +1051,7 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
         class="euiFlyout emotion-euiFlyout-l-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
-        style="inline-size: 500px;"
+        style="inline-size: 500px; z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1075,7 +1092,7 @@ exports[`EuiFlyout props size fill is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1091,6 +1108,7 @@ exports[`EuiFlyout props size fill is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1131,7 +1149,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1147,6 +1165,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-l-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1187,7 +1206,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1203,6 +1222,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1243,7 +1263,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
 >
   <div>
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1259,6 +1279,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
         class="euiFlyout emotion-euiFlyout-l-s-noMaxWidth-overlay-right-right"
         data-autofocus="true"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
@@ -1303,7 +1324,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
       style="inset-block-start: 0px;"
     />
     <div
-      class="css-yux95t-overlayMask"
+      class="css-w7myn3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1321,6 +1342,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
         data-autofocus="true"
         data-test-subj="test subject string"
         role="dialog"
+        style="z-index: 1000;"
         tabindex="0"
       >
         <p
diff --git a/packages/eui/src/components/flyout/_flyout_overlay.tsx b/packages/eui/src/components/flyout/_flyout_overlay.tsx
index 47f31f41897..145078499cc 100644
--- a/packages/eui/src/components/flyout/_flyout_overlay.tsx
+++ b/packages/eui/src/components/flyout/_flyout_overlay.tsx
@@ -6,35 +6,29 @@
  * Side Public License, v 1.
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 import { css, cx } from '@emotion/css';
-import type { EuiFlyoutComponentProps } from './flyout.component';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiPortal } from '../portal';
-import { useEuiMemoizedStyles, type UseEuiTheme } from '../../services';
+import type { EuiFlyoutComponentProps } from './flyout.component';
 
 export interface EuiFlyoutOverlayProps extends PropsWithChildren {
   hasOverlayMask: boolean;
   maskProps: EuiFlyoutComponentProps['maskProps'];
   isPushed: boolean;
+  maskZIndex: number;
 }
 
-const getEuiFlyoutOverlayStyles = ({ euiTheme }: UseEuiTheme) => {
-  // TODO(tkajtoch): This should likely depend on maskProps.headerZIndexLocation
-  // in cases where the mask has z-index 6000
-  const maskLevel = Number(euiTheme.levels.flyout) - 1;
-
-  return {
-    overlayMask: css`
-      /*
-      This needs to have !important to override the default EuiOverlayMask
-      z-index based on the headerZindexLocation prop. Using the style attribute
-      doesn't work since EuiOverlayMask requires a string style prop that
-      causes React errors in the test environment.
-      */
-      z-index: ${maskLevel} !important;
-    `,
-  };
+const getEuiFlyoutOverlayStyles = (zIndex: number) => {
+  /*
+  This needs to have !important to override the default EuiOverlayMask
+  z-index based on the headerZindexLocation prop. Using the style attribute
+  doesn't work since EuiOverlayMask requires a string style prop that
+  causes React errors in the test environment.
+  */
+  return css`
+    z-index: ${zIndex} !important;
+  `;
 };
 
 /**
@@ -50,20 +44,28 @@ export const EuiFlyoutOverlay = ({
   isPushed,
   maskProps,
   hasOverlayMask,
+  maskZIndex,
 }: EuiFlyoutOverlayProps) => {
-  const styles = useEuiMemoizedStyles(getEuiFlyoutOverlayStyles);
+  const styles = useMemo(
+    () => getEuiFlyoutOverlayStyles(maskZIndex),
+    [maskZIndex]
+  );
+
   let content = children;
 
   if (!isPushed || hasOverlayMask) {
     content = <EuiPortal>{content}</EuiPortal>;
   }
 
+  const classes = cx(maskProps?.className, styles);
+
   return (
     <>
       {hasOverlayMask && (
         <EuiOverlayMask
+          headerZindexLocation="below"
           {...maskProps}
-          className={cx(maskProps?.className, styles.overlayMask)}
+          className={classes}
         />
       )}
       {content}
diff --git a/packages/eui/src/components/flyout/flyout.component.tsx b/packages/eui/src/components/flyout/flyout.component.tsx
index bb3fb822386..3f73a255bad 100644
--- a/packages/eui/src/components/flyout/flyout.component.tsx
+++ b/packages/eui/src/components/flyout/flyout.component.tsx
@@ -70,6 +70,7 @@ import { EuiFlyoutOverlay } from './_flyout_overlay';
 import { EuiFlyoutResizeButton } from './_flyout_resize_button';
 import { useEuiFlyoutResizable } from './use_flyout_resizable';
 import type { EuiFlyoutCloseEvent } from './types';
+import { useEuiFlyoutZIndex } from './use_flyout_z_index';
 
 interface _EuiFlyoutComponentProps {
   /**
@@ -403,6 +404,11 @@ export const EuiFlyoutComponent = forwardRef(
 
     const siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
 
+    const { flyoutZIndex, maskZIndex } = useEuiFlyoutZIndex({
+      maskProps,
+      isPushed,
+    });
+
     /**
      * Set inline styles
      */
@@ -412,7 +418,8 @@ export const EuiFlyoutComponent = forwardRef(
         layoutMode,
         siblingFlyoutId,
         siblingFlyoutWidth || null,
-        maxWidth
+        maxWidth,
+        flyoutZIndex
       );
 
       return { ...style, ...composedStyles };
@@ -423,6 +430,7 @@ export const EuiFlyoutComponent = forwardRef(
       siblingFlyoutId,
       siblingFlyoutWidth,
       maxWidth,
+      flyoutZIndex,
     ]);
 
     const styles = useEuiMemoizedStyles(euiFlyoutStyles);
@@ -579,6 +587,7 @@ export const EuiFlyoutComponent = forwardRef(
       <EuiFlyoutOverlay
         hasOverlayMask={hasOverlayMask}
         isPushed={isPushed}
+        maskZIndex={maskZIndex}
         maskProps={{
           ...maskProps,
           maskRef: maskCombinedRefs,
diff --git a/packages/eui/src/components/flyout/flyout.styles.test.tsx b/packages/eui/src/components/flyout/flyout.styles.test.tsx
index 5d703cdc291..2003d57b932 100644
--- a/packages/eui/src/components/flyout/flyout.styles.test.tsx
+++ b/packages/eui/src/components/flyout/flyout.styles.test.tsx
@@ -219,5 +219,22 @@ describe('flyout.styles', () => {
         maxInlineSize: '600px',
       });
     });
+
+    it('should handle zIndex when set', () => {
+      // This tests the case where maxWidth is provided but dynamic width calculation
+      // is not applied (e.g., not fill size, not side-by-side, etc.)
+      const result = composeFlyoutInlineStyles(
+        'm',
+        'side-by-side',
+        'sibling-id',
+        300,
+        600,
+        1000
+      );
+      expect(result).toEqual({
+        maxInlineSize: '600px',
+        zIndex: 1000,
+      });
+    });
   });
 });
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
index 7d6bd148be8..b9aa7549247 100644
--- a/packages/eui/src/components/flyout/flyout.styles.ts
+++ b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -80,7 +80,6 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('bottom', 0)}
       ${logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)')}
       ${logicalCSS('height', 'inherit')}
-      z-index: ${euiTheme.levels.flyout};
       background: ${euiTheme.colors.backgroundBasePlain};
       display: flex;
       flex-direction: column;
@@ -361,7 +360,8 @@ export const composeFlyoutInlineStyles = (
   layoutMode: 'side-by-side' | 'stacked',
   siblingFlyoutId: string | null,
   siblingFlyoutWidth: number | null,
-  maxWidth: boolean | number | string | undefined
+  maxWidth: boolean | number | string | undefined,
+  zIndex?: number
 ): React.CSSProperties => {
   // Handle custom width values (non-named sizes)
   const customWidthStyles = !isEuiFlyoutSizeNamed(size)
@@ -433,5 +433,6 @@ export const composeFlyoutInlineStyles = (
     ...dynamicStyles,
     ...minWidthOverride,
     ...(finalMaxWidth ? { maxWidth: finalMaxWidth } : {}),
+    zIndex,
   });
 };
diff --git a/packages/eui/src/components/flyout/use_flyout_z_index.test.ts b/packages/eui/src/components/flyout/use_flyout_z_index.test.ts
new file mode 100644
index 00000000000..dcd01d8c1fe
--- /dev/null
+++ b/packages/eui/src/components/flyout/use_flyout_z_index.test.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { renderHook } from '../../test/rtl/render_hook';
+import { UseEuiFlyoutZIndex, useEuiFlyoutZIndex } from './use_flyout_z_index';
+
+describe('useEuiFlyoutZIndex', () => {
+  const render = (initialProps: UseEuiFlyoutZIndex) =>
+    renderHook((props: UseEuiFlyoutZIndex) => useEuiFlyoutZIndex(props), {
+      initialProps,
+    });
+
+  it('returns flyout level based z-index values when isPushed = true', () => {
+    const { result, rerender } = render({ isPushed: true });
+    expect(result.current.flyoutZIndex).toEqual(1000);
+    expect(result.current.maskZIndex).toEqual(999);
+
+    rerender({ isPushed: true, maskProps: { headerZindexLocation: 'above' } });
+    expect(result.current.flyoutZIndex).toEqual(1000);
+    expect(result.current.maskZIndex).toEqual(999);
+
+    rerender({ isPushed: true, maskProps: { headerZindexLocation: 'below' } });
+    expect(result.current.flyoutZIndex).toEqual(1000);
+    expect(result.current.maskZIndex).toEqual(999);
+  });
+
+  it('returns flyout level based z-index values when maskProps.headerZindexLocation != "above"', () => {
+    const { result, rerender } = render({ isPushed: false, maskProps: {} });
+    expect(result.current.flyoutZIndex).toEqual(1000);
+    expect(result.current.maskZIndex).toEqual(999);
+
+    rerender({ isPushed: false, maskProps: { headerZindexLocation: 'below' } });
+    expect(result.current.flyoutZIndex).toEqual(1000);
+    expect(result.current.maskZIndex).toEqual(999);
+  });
+
+  it('returns mask level based z-index values when maskProps.headerZindexLocation = "above"', () => {
+    const { result } = render({
+      isPushed: false,
+      maskProps: { headerZindexLocation: 'above' },
+    });
+    expect(result.current.flyoutZIndex).toEqual(6000);
+    expect(result.current.maskZIndex).toEqual(5999);
+  });
+});
diff --git a/packages/eui/src/components/flyout/use_flyout_z_index.ts b/packages/eui/src/components/flyout/use_flyout_z_index.ts
new file mode 100644
index 00000000000..5f6403201eb
--- /dev/null
+++ b/packages/eui/src/components/flyout/use_flyout_z_index.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { CSSProperties } from 'react';
+import { useEuiTheme } from '../../services';
+import type { EuiOverlayMaskProps } from '../overlay_mask';
+
+/**
+ * @internal
+ */
+export interface UseEuiFlyoutZIndex {
+  maskProps?: EuiOverlayMaskProps;
+  isPushed: boolean;
+}
+
+const calculateZIndex = (initialValue: CSSProperties['zIndex']) => {
+  const valueAsNumber = Number(initialValue);
+
+  return {
+    flyoutZIndex: valueAsNumber,
+    maskZIndex: valueAsNumber - 1,
+  };
+};
+
+/**
+ * TODO: Calculate z-index values so that the latest flyout is always on top
+ * https://github.com/elastic/eui/issues/9160
+ * @internal
+ */
+export const useEuiFlyoutZIndex = ({
+  maskProps,
+  isPushed,
+}: UseEuiFlyoutZIndex) => {
+  const { euiTheme } = useEuiTheme();
+
+  // The default headerZindexLocation for EuiFlyout is "below"
+  // which is different from what EuiOverlayMask fallbacks to - see
+  // _flyout_overlay.tsx.
+  // We set z-index to mask level only when explicitly overridden
+  // via the maskProps prop
+  if (!isPushed && maskProps?.headerZindexLocation === 'above') {
+    return calculateZIndex(euiTheme.levels.mask);
+  }
+
+  return calculateZIndex(euiTheme.levels.flyout);
+};