type
Post
status
Published
date
May 26, 2023
slug
summary
tags
category
icon
password
在开发页面的时候，我发现一个问题：页面中的弹窗被某些元素覆盖掉了。这个弹窗的 z-index 属性是比元素的 z-index 属性值要大一些，那么为什么会出现弹窗被覆盖的情况呢？
🤔 为什么 z-index 更大，反而渲染在下层
本质原因是
z-index 只能同级比较，即只有兄弟元素间才能够通过 z-index 来区分渲染层级，而我当前页面中的弹窗和覆盖弹窗的元素并不是兄弟元素，所以对它们赋值的 z-index 是达不到预期效果的。想要让这个弹窗不被覆盖，按照常规交互范式，就需要让弹窗挂载到body元素下。
📝 如何将元素挂载到 body 标签下
一时没有思路，就去翻了翻 antd 的源码，而 antd 本身并没有这段逻辑，真正的逻辑在 rc-portal 工具包中，经过代码追溯的过程后，我发现它是使用
ReactDom.createPortal API 来实现的。使用这个 API 之后，效果完美！
附上官网这个 API 的使用方法：
- 作者:Marco
- 链接:https://hbuecx.com/article/5ceceefe-ccb8-40d8-825e-7c6811009135
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
