Question

我有4个元素，其中3个是根级别的同级： -主要：亲戚（兄弟姐妹），Z索引1 -侧边栏：固定（同级），Z索引2 -标头：相对（同级），Z索引3 -弹出窗口：固定（Main的子级），Z-index 4

有效的方法： -标头（相对，索引3）元素位于固定的侧边栏（固定，索引2）的顶部，符合预期 -主菜单位于侧边栏和标题下方

问题： -在侧边栏（固定，索引2）下方和页眉（相对，索引3）下方，但在主屏幕顶部（弹出窗口的位置不受侧边栏影响）呈现弹出窗口（固定，索引4）。 > -固定的补充工具栏不会在Mobile View中呈现，但是相对的Main会受到其3 rem的理论宽度的影响。

增加Popup的Z-index并不能使它超越一切。

当我在Mobile View中将Main更改为static时，未渲染的补充工具栏的理论宽度不会对其产生影响。（由于补充工具栏的位置：固定，我根本不明白为什么它会影响Main。）

从我的主题开始（我正在使用样式化组件）

index: {
    main: 1,
    sidebar: 2,
    header: 3,
    popup: 4,
  }

这是框架整个页面的布局容器：

export const Layout = (props) => (
  <>  
    <Sidebar />
    <Header />
    <Main>
      {props.children} --> Popup is Child 
    </Main>
  </>
)

我希望弹出窗口位于一切之上，而Main不受侧边栏的影响。