Copyright © 1999-2020, CSDN.NET, All Rights Reserved
打开APP
沙雕在人间
关注
el-dialog遮罩层的问题 原创
2021-08-30 11:11:15
阅读量
8.1k
AI必读
沙雕在人间
码龄6年
关注
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题
在这里插入图片描述
解决方法：添加:append-to-body="true"属性;
element ui 的官网
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
使用:append-to-body有时会出现一定的别的问题，比如：
如果设置了append-to-body=true，然后再设置当el-dialog的内部的滚动条时，会出现设置不上的情况，因为此时的el-dialog是挂载到body上的，不在.complainInfo父级样式的控制下。
补充：Z-index 仅能在定位元素上奏效 ！！！！
z-index元素的position属性要是relative，absolute或是fixed。
z-index在一定的情况下会失效。
①、父元素position为relative时，子元素的z-index失效。
解决：父元素position改为absolute或static
②、该元素没有设置position属性为非static属性。
解决：设置该元素的position属性为relative，absolute或是fixed中的一种。
③、该标签在设置z-index的同时还设置了float浮动
解决：float去除，改为display：inline-block；
