element-ui框架的el-dialog弹出框被遮罩层挡住了如图：
image
解决办法
在el-dialog标签⾥添加 :modal-append-to-body='false'
image
实现效果：
image
问题解析
先来看看element-ui官⽹提供的属性说明⽂档
image
⽂档解释：翻译成⼤⽩话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，
它的遮罩层就会被插⼊到body标签下（即与组件所在的最外层div同⼀层级），知道这个原理就好办了。
问题分析：经过分析源代码可得，el-dialog的显⽰层和遮罩层都设置了position:fixed，当然显⽰层的z-index肯定要⽐遮罩层的⼤，才能正常的显⽰弹出框。问题就出在此处，若el-dialog的⽗级也设置了position:fixed，并且其z-index⽐弹出框的遮罩层的⼩（遮罩层处于更⾼⼀层），那么弹出框的内容就会被遮罩层所遮挡住了。
经过分析出问题的代码可得出，el-dialog的⽗级元素确实设置了position:fixed，并且其z-index⽐弹出框的遮罩层的⼩，所以就会出现遮罩层把内容挡住的问题。
解决⽅案
1、给el-dialog设置modal-append-to-body=“false”，使遮罩层插⼊⾄ Dialog 的⽗元素上。（推荐）
2、给position:fixed的⽗元素设置⼀个z-index，并且要⽐遮盖层的⼤。
3、el-dialog⽗元素不使⽤fixed定位。
为了验证这个问题，我特地写了个demo，如下图：
图⼀：modal-append-to-body=“true”
image
图⼆：modal-append-to-body=“false”
position标签属性image (完)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。