react全屏后modal弹框被遮挡

在 React 中，如果全屏组件的定位属性为 `fixed`，而 modal 组件的定位属性为默认值 `static`，那么 modal 组件会被全屏组件遮挡。这是因为 `fixed` 定位的元素会脱离文档流，并且其层级关系高于其他非 `fixed` 定位的元素。 解决方法有两种： 1. 将 modal 组件的定位属性也设置为 `fixed`，并将其放置在全屏组件之前。例如： ```css .modal { position: fixed; z-index: 1001; } .full-screen { position: fixed; z-index: 1000; } ``` 2. 将全屏组件的定位属性改为 `absolute`，并将其放置在 modal 组件之前。例如： ```css .modal { position: relative; z-index: 1001; } .full-screen { position: absolute; z-index: 1000; } ``` 需要注意的是，如果同时存在多个定位属性为 `fixed` 或 `absolute` 的元素，它们的层级关系将由它们在 HTML 文档中的顺序决定，后面的元素会显示在前面的元素之上。因此需要确保 modal 组件在全屏组件之前出现在 HTML 文档中。