Material UI中设置z-index无效 如何让内嵌Drawer层级高于Modal

给Drawer设置z-index不生效，核心是层叠上下文的嵌套限制：

• Modal组件渲染时会生成独立的层叠上下文，当Drawer作为Modal的子节点嵌套渲染时，Drawer的层叠层级会被完全锁死在Modal的层叠上下文范围内，无论设置多高的z-index，都无法突破父级Modal的层级上限，始终会被Modal自身的遮罩、外部平级弹层覆盖。
• 基础排查点：z-index属性仅对position值不为static的元素生效，如果Drawer没有设置relative/absolute/fixed这类有效定位，z-index本身不会产生任何效果。

优先使用第一种方案，适配所有主流UI组件库，不会引发后续层级错乱问题：

• 解除DOM嵌套，将Drawer挂载到全局body节点
  主流组件库的弹层类组件都提供了自定义挂载容器的配置项（属性名一般为getContainer或container），直接将Drawer的挂载节点指定为document.body，让Drawer和Modal成为DOM树的平级节点，彻底脱离Modal的层叠上下文限制，之后只要把Drawer的z-index设置为比Modal更高的数值，就能正常显示在Modal上方。
  参考代码：

  <Modal open={modalOpen} title="Modal标题">
    {/* Modal其他内容 */}
    <Drawer
      open={drawerOpen}
      title="Drawer标题"
      getContainer={document.body} // 挂载到全局body，脱离Modal的DOM层级
      zIndex={1100} // 通用Modal默认z-index为1000，设置更高值即可
    >
      Drawer内容区域
    </Drawer>
  </Modal>
  

• 侵入调整Modal内部样式（非必要不推荐）
  如果受业务场景限制无法修改Drawer的挂载节点，可以手动覆盖组件样式，调低Modal遮罩的z-index，同时给Modal的内容容器设置更高的层叠上下文，保证内部嵌套的Drawer可以盖在遮罩之上。这种方案需要修改组件库内置类名的样式，后续升级组件库、叠加其他类型弹层时很容易出现层级冲突，除非万不得已不要使用。

• 不要无上限全局拉高弹层的z-index值，很容易导致后续的消息提示、下拉菜单、二次确认弹窗等组件被异常遮盖，尽量遵循组件库默认的层级梯度做小范围调整。
• 调整z-index前先确认目标元素已经设置了非static的定位属性，避免做无效配置。

内容的提问来源于stack exchange，提问作者José Carlos