diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index 58b9059ff4fee..a8db8513a8888 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -232,13 +232,11 @@ export const TextArea = styled(AntdInput.TextArea)`
   border-radius: ${({ theme }) => theme.borderRadius}px;
 `;
 
+// @z-index-below-dashboard-header (100) - 1 = 99
 export const NoAnimationDropdown = (
   props: DropDownProps & { children?: React.ReactNode },
 ) => (
-  <Dropdown
-    overlayStyle={{ zIndex: 4000, animationDuration: '0s' }}
-    {...props}
-  />
+  <Dropdown overlayStyle={{ zIndex: 99, animationDuration: '0s' }} {...props} />
 );
 
 export const ThinSkeleton = styled(Skeleton)`
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 552266f94dab2..f5dfaf3551e11 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -19,7 +19,7 @@
 /* eslint-env browser */
 import cx from 'classnames';
 import React, { FC } from 'react';
-import { JsonObject, styled } from '@superset-ui/core';
+import { JsonObject, styled, css } from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import BuilderComponentPane from 'src/dashboard/components/BuilderComponentPane';
 import DashboardHeader from 'src/dashboard/containers/DashboardHeader';
@@ -48,6 +48,7 @@ import {
 } from 'src/dashboard/util/constants';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
 import Loading from 'src/components/Loading';
+import { Global } from '@emotion/react';
 import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
 import DashboardContainer from './DashboardContainer';
 import { useNativeFilters } from './state';
@@ -83,13 +84,13 @@ const StickyPanel = styled.div<{ width: number }>`
   flex: 0 0 ${({ width }) => width}px;
 `;
 
-// @z-index-above-dashboard-charts + 1 = 11
+// @z-index-above-dashboard-popovers (99) + 1 = 100
 const StyledHeader = styled.div`
   grid-column: 2;
   grid-row: 1;
   position: sticky;
   top: 0px;
-  z-index: 11;
+  z-index: 100;
 `;
 
 const StyledContent = styled.div<{
@@ -97,7 +98,8 @@ const StyledContent = styled.div<{
 }>`
   grid-column: 2;
   grid-row: 2;
-  ${({ fullSizeChartId }) => fullSizeChartId && `z-index: 1000;`}
+  // @z-index-above-dashboard-header (100) + 1 = 101
+  ${({ fullSizeChartId }) => fullSizeChartId && `z-index: 101;`}
 `;
 
 const StyledDashboardContent = styled.div<{
@@ -283,6 +285,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
         </DragDroppable>
       </StyledHeader>
       <StyledContent fullSizeChartId={fullSizeChartId}>
+        <Global
+          styles={css`
+            // @z-index-above-dashboard-header (100) + 1 = 101
+            ${fullSizeChartId &&
+            `div > .filterStatusPopover.ant-popover{z-index: 101}`}
+          `}
+        />
         <div
           data-test="dashboard-content"
           className={cx('dashboard', editMode && 'dashboard--editing')}