diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
index 8b13e97c95..42b1030149 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
@@ -8,6 +8,10 @@
   flex: 1;
 }
 
+#ws-page-banners {
+  z-index: var(--pf-t--global--z-index--2xl);
+}
+
 /* Search */
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
index 38b76252ef..e88574f901 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
@@ -350,6 +350,12 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   return (
     <React.Fragment>
       <RtlContext.Provider value={isRTL}>
+        {/* These alert banners need to be one of the first focusable items so users navigating via
+        keybaord can dismiss them early in their navigation. */}
+        <div id="ws-page-banners">
+          <NavAnnouncementBanner />
+          {hasGdprBanner && <GdprBanner />}
+        </div>
         <Page
           id="ws-page"
           mainContainerId="ws-page-main"
@@ -363,10 +369,6 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
           {children}
           {process.env.hasFooter && <Footer isDarkTheme={isDarkTheme} />}
         </Page>
-        <div id="ws-page-banners">
-          <NavAnnouncementBanner />
-          {hasGdprBanner && <GdprBanner />}
-        </div>
       </RtlContext.Provider>
     </React.Fragment>
   );