fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最新推荐文章于 2025-05-23 10:25:29 发布
最新推荐文章于 2025-05-23 10:25:29 发布
阅读量1.2k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NGLLLLLL/article/details/118632728
在使用Element UI的el-table组件时，为实现表头固定效果，给el-table-column添加了fixed属性。然而，这导致了el-dialog弹框被遮罩层覆盖。解决方法是在el-dialog上设置modal-append-to-body='false'，这样弹框将不会被插入到body标签下，而是保持在组件的父元素层级，从而避免了被遮罩层覆盖的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最近由于项目需要给el-table固定表头，于是就给el-table-column添加了fixed属性，表头成功固定，但是el-dialog弹框却被覆盖了，呜呜呜~
在这里插入图片描述

解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可
若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）
最后完美解决
在这里插入图片描述

unIqueGsl
关注
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2234
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
实现在引入vue.js中element-ui的el-dialog弹框拖拽
千山雪的博客
11-06 1669
实现在引入vue.js中element-ui的el-dialog弹框拖拽 创建一个directive.js 在需求页面引入该js(js内容如下) 在使用模板处加入v-dialogDrag 参数 <el-dialog class="confirm" v-dialogDrag> </el-dialog> // v-dialogDrag: 弹窗拖拽 Vue.directive...
el-dialog嵌套遇到的问题
梅花寺
05-25 4998
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
position：fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
yh8899abc的博客
04-27 2887
最近vue项目中为了使header与sidebar部分固定不动，只有main主体部分内容滚动，于是给main部分加上了固定定位position：fixed，overhidden：scroll .app-main { height: 100%; position: fixed; overflow: scroll; } 导致main主体部分子元素dialog弹出框被遮罩覆盖的...
el-dialog 组件 多层嵌套 被遮罩问题
最新发布
m0_63542260的博客
05-23 673
这是一段信息
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 8万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
element-ui 的Dialog被蒙板遮住原因及解决办法
weixin_34239592的博客
07-06 1723
用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。 查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决办法很简单，查看 element 的 官方文档 在 el-dialog 标签里添加下面两行代码的...
el-dialog被遮罩层遮挡
BangD的博客
11-01 525
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
Element-UI实现el-dialog弹框拖拽功能
觉醒法师的专栏
06-17 8836
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题
qq_45927262的博客
02-11 380
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。
父页面显示遮罩层弹出半透明状态的dialog
09-04
在网页设计中，创建一个父页面显示遮罩层并弹出半透明状态的dialog是常见的交互效果，这种设计可以提供用户友好的体验，使他们能够专注于当前操作而不会被其他页面元素分心。Dialog（对话框）通常用来展示重要的信息...
el-dialog固定头部与底部，中间内容滑动
weixin_69890748的博客
05-06 1616
el-dialog固定头部与底部，中间内容滑动
element-ui 遮罩层el-dialog 中间内容被被蒙板遮住 解决
AdleyTales的技术博客
11-19 8239
原因： Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决： // 在 el-dialog 标签里添加 :append-to-body=&quot;true&quot; &amp;lt;!-- 编辑弹出框 --&amp;gt; &amp;lt;el-dialog title=&quot;添加用户&quot; :visible.sync=&a
Jquery：如何让子窗口的div显示在父窗口之上
代码技巧
06-18 3337
leftiframe中的jQuery操作mainiframe的内容someID的内容
el-dialog窗口中绝对定位子元素被遮挡问题解决
hahahahha111的博客
01-21 2642
el-dialog窗口中绝对定位子元素被遮挡问题解决 1.背景：el-dialog中使用了表单，表单校验信息不采用显示在输入框下方的方式，而是自定义一个组件来显示在标签上方（类似el-poppver），其使用了绝对定位； 2.现象：第一行表单元素（两个输入框，标签位置为top），当校验信息(显示于标签之上)为换行显示时，好像被el-dialog__header遮挡了，不能显示完全，因此力求可以显示完整的方法； 3.探索之路：网上搜解决绝对定位div子元素被遮挡的方法，均是父元素层级太低或父元素未设置posi
layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值
Start2019
06-03 2345
尝试使用下面3种方法解决，但是失败了，最后还是通过layui的弹出框解决的。 1、直接在子页面写弹框代码及弹框定位样式； 2、父页面放空div，覆盖整个父页面； 3、使用 $.load() 加载弹框内容
el-dialog被遮罩层遮挡（解决办法）
qq_40087327的博客
10-22 3990
el-dialog被遮罩层遮挡（解决办法） vue框架结构是左边菜单，右边根据菜单显示内容的，类似于若依管理端框架，el-dialog被遮罩层遮挡解决办法： :append-to-body="true" 设置了这个属性，el-dialog是插入在body上的，不会被这种左菜单右内容的这种框架结构影响 ...
el-dialog弹框在遮罩层下
04-03
<think>嗯，用户遇到了el-dialog弹框显示在遮罩层下方的问题，需要解决。首先，我应该回忆一下element-ui中el-dialog的z-index相关设置。根据之前的引用资料，遮罩层的z-index通常是2000，而弹框的z-index应该比遮罩层高才能显示在上方。可能用户没有正确设置弹框的z-index，或者有其他元素覆盖了。 接着，检查可能的解决方案。根据引用[1]，设置弹框的样式，比如/deep/ .el-dialog{ z-index: 2001 !important; }，这样可以确保弹框在遮罩层之上。另外，用户可能需要检查是否有其他自定义样式覆盖了默认值，或者是否在嵌套使用时层级计算错误。 另外，动态设置弹框的z-index也是一个方法，比如在打开弹框时设置更高的值。例如，使用:modal-append-to-body="false"属性，避免遮罩层和弹框不在同一层级，导致z-index不生效。引用[2]中提到的拖拽功能可能也会影响层级，需要确保拖拽时z-index更新。 还要考虑全局样式的冲突，检查是否有其他组件或样式表修改了z-index的值，导致遮罩层高于弹框。用户可能需要使用浏览器开发者工具检查元素，确认弹框和遮罩层的实际z-index值，从而调整。 最后，总结几种可能的解决方案：直接修改el-dialog的z-index，调整modal-append-to-body属性，动态设置z-index，以及检查全局样式。需要提醒用户根据具体情况选择合适的方法，并进行测试。</think>### 解决方案：el-dialog弹框显示在遮罩层下方的问题 #### 问题原因 el-dialog的默认层级（`z-index`）为`2000`，而遮罩层（`.v-modal`）的默认层级也为`2000`。当两者层级相同或弹框层级更低时，可能出现弹框被遮罩层覆盖的问题[^1][^2]。 --- #### 解决方法 ##### 1. **直接修改弹框层级** 通过CSS强制提升弹框的`z-index`值： ```css /* 全局样式 */ .el-dialog { z-index: 2001 !important; } /* 若使用scoped样式 */ /deep/ .el-dialog { z-index: 2001 !important; } ``` 此方法确保弹框始终在遮罩层上方。 --- ##### 2. **调整模态框挂载位置** 通过设置`modal-append-to-body="false"`，使遮罩层和弹框脱离同一父容器，避免层级冲突： ```html <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" > 弹框内容 </el-dialog> ``` --- ##### 3. **动态设置z-index** 在弹框打开时动态调整层级： ```javascript this.$nextTick(() => { const dialogDom = document.querySelector('.el-dialog'); if (dialogDom) { dialogDom.style.zIndex = 2001; } }); ``` --- ##### 4. **检查全局样式冲突** 使用浏览器开发者工具检查以下内容： - 确认`.el-dialog`和`.v-modal`的实际`z-index`值 - 排查是否有其他CSS覆盖默认值（如全局样式或第三方库） --- #### 验证效果 通过上述方法调整后，弹框会显示在遮罩层上方。若问题仍存在，需进一步检查嵌套组件或复杂布局中的层级叠加逻辑[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值