【bug】关于el-dialog上额外多了一层遮罩层

今天写代码发现一个问题,弹出el-dialog弹窗时额外会出现一个遮罩层在整个页面最顶上,任意点击一处地方后才是正常的遮罩层和弹框,找遍所有功能点也没找到原因。后来听说用absolute绝对定位也会出现这样的问题,我一看自己的代码,原来是给最外面的div设定位为fixed了,无论是绝对定位还是固定定位,都会使元素脱离文档流,删掉换个布局去实现就好了。

遇到类似问题可以试试以下方法:

1.避免盒子是absolute、fixed、float等脱离文档流的布局,删除或其他布局替代(包括父元素或他的爷爷、曾祖父等)

2.如果是el-dialog里又嵌套了一层el-dialog弹框,一定要把内层的dialog加上append-to-body="true",插入至 body 元素,保证层级的正确(elementUI的组件内有更多解释)

 

我在注释掉fixed以后就恢复正常啦,如图:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值