在Vue3结合Element Plus的项目中，遇到dialog组件显示层级错误，表现为固定定位的内容下，dialog被遮挡。通过在<el-dialog>添加'append to body'属性成功解决了这个问题，避免了使用z-index可能导致的复杂性。这是一个关于前端开发中解决组件层级冲突的实例。
错误描述：通过position：fixed 固定了顶部、中间内容和底部；在点击header中的个人信息出现对话框抽屉时，显示在了另外两层的下面；
如下图所示：
先说解决方法： 在<el-dialog 中加上 append to body 属性
一开始想通过z-index解决，但是总会有一些问题，比如如果中间内容中也有dialog弹窗的话，会出现其他问题；
加了之后就正常了；
错误记录，欢迎讨论；
参考：https://blog.csdn.net/weixin_43626529/article/details/121016200
最低0.47元/天 解锁文章
扫一扫
4504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
