Fixed侧边栏Menu与Modal Backdrop的z-index层级异常问题咨询

我给模态背景（ModalBackdrop）设置了z-index: 1040，侧边栏（Sidebar）的z-index: 3，二者都采用fixed定位，但实际显示时侧边栏未被模态背景遮挡，二者处于同一层级。

侧边栏样式 #

export const Sidebar = styled("aside")<{ sidebarCollapse: boolean }>`
  grid-area: sidebar;
  box-shadow: 0px 0px 10px 10px rgb(0 0 0 / 20%);
  display: grid;
  z-index: 3;
  width: 260px;
  max-width: ${({ sidebarCollapse }) => (sidebarCollapse ? "90px" : "260px")};
  overflow-x: ${({ sidebarCollapse }) =>
    sidebarCollapse ? "visible" : "hidden"};
  transition: max-width 0.4s ease-in-out;
  grid-template-rows: 95px 1fr;
  grid-row-gap: 23px;
  height: 100%;
  background-color: white;
  position: fixed;
  margin-right: 200px;
`;

模态背景样式 #

export const ModalBackdrop = styled("div")`
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100%;
  height: calc(100vh * 2);
  background-color: #000;
`;

问题截图 #

这是堆叠上下文导致的问题：当元素的父级创建了独立的堆叠上下文时，子元素的z-index仅在该上下文内生效，无法突破父级的层级限制。哪怕子元素设了更高的z-index，如果父级的堆叠上下文层级更低，子元素的层级表现也会异常。

排查与解决步骤： #

1. 检查侧边栏的父元素：查看侧边栏所有上层父节点的样式，确认是否存在以下会创建堆叠上下文的属性：

   • position 设为 relative/absolute/fixed 且同时设置了非auto的z-index
   • transform、perspective、filter 等属性值不为 none
   • opacity 小于 1
   • isolation: isolate

2. 移除不必要的堆叠上下文：如果父元素的上述属性并非必须，直接移除，让侧边栏的z-index在全局堆叠上下文里生效。

3. 调整层级结构：如果父元素必须保留堆叠上下文，可将ModalBackdrop移动到与侧边栏父元素同一层级的DOM位置，或给ModalBackdrop的父级设置更高的z-index，确保它所在的堆叠上下文层级高于侧边栏的父上下文。

4. 验证效果：修改后刷新页面，确认模态背景能正常遮挡侧边栏。

内容的提问来源于stack exchange，提问作者Agustin R