如何在React项目中让自定义div层级高于modal-backdrop模态遮罩层

问题根本原因 #

你遇到的是**层叠上下文（Stacking Context）**的限制：

• 你的.preview-window元素嵌套在#root > ion-app 这层DOM树内部，当前它的所有祖先元素的层叠等级都低于直接挂载在<body>下的modal-backdrop和模态框元素
• 即便你给.preview-window设置了999999的z-index，这个z-index也只在它所在的父级层叠上下文内生效，无法突破父容器的层叠等级和body下的模态框层级比较

可直接落地的解决方案 #

方案1：把Preview组件用React Portal挂载到body下 #

这是最稳妥的方案，直接让Preview和模态框、modal-backdrop处在同一个层级的DOM节点下，z-index就能正常比较：

import React, { useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';

const Preview: React.FC<ContainerProps> = ({ position, sizex, sizey }) => {
  // 创建独立挂载节点
  const el = useMemo(() => document.createElement('div'), []);

  useEffect(() => {
    document.body.appendChild(el);
    // 组件销毁时清除节点
    return () => document.body.removeChild(el);
  }, [el]);

  return createPortal(
    <div 
      className="preview-window" 
      style={{ width: sizex, height: sizey}}
    >
    </div>,
    el
  );
};

改完之后Preview就直接挂载在body下，你设置的999999的z-index会比1050的modal-backdrop高，自然就显示在遮罩上方了。

方案2：解决react-layers-manager的TS报错 #

如果要继续用这个库管理层级，直接按照TS提示处理声明问题即可：
在你的项目src目录下新建一个typings.d.ts文件，添加一行内容：

declare module 'react-layers-manager';

保存后TS报错就会消失，可正常使用该库。

方案3（不推荐）：调整父容器的z-index #

如果不想改组件挂载逻辑，可以找到ion-app或者#root元素，给它设置高于1050的z-index，同时设置position: relative让层叠上下文生效。但这个方案可能会导致整个app内容都覆盖在模态框上，影响模态框正常交互，非特殊需求不建议使用。

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