el-dialog遮罩层覆盖弹框（z-index值大的图层在z-index值小的图层下面）_el-dialog z-index-程序员宅基地

技术标签： CSS

一、问题

如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。

审查元素时看到，遮罩层的z-index为2042。

将遮罩层隐藏，查看弹框的z-index为2043。

二、原因

z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。

三、解决方案

打开官方文档，关于el-dialog的属性，有以下两个说明。

从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。如果将遮罩层和弹框插入到同一个地方，就可以避免上面的问题了。

设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。

同理，将append-to-body设置为true，显示效果相同。

本文链接：https://blog.csdn.net/qq_26834399/article/details/102563675

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

CentOS7 Yum卸载open-jdk_yum删除openjdk-程序员宅基地

文章浏览阅读2.5k次。查看CentOS自带JDK是否已安装 1 [root@test ~]# yum list installed |grep java 若有自带安装的JDK，应如下操作进行卸载CentOS系统自带Java环境 1 2 3 4 5 6 7 8 9 10 [r..._yum删除openjdk

电视信号视频制式中CCIR和EIA，PAL与NTSC的意思_ccir pal-程序员宅基地

文章浏览阅读6.1k次，点赞2次，收藏13次。其实这两个制式中：CCIR和EIA均是黑白输入制式，PAL与NTSC是彩色输入制式。不过在网上还看到了一个相关的故事：这又得说故事了,而且还牵涉些政治问题及商业利益!很久很久以前,有些人发明了电视机,当然,是黑白的!这时,问题来了:大家在做电视机,总得有个标准,否则无法兼容.在美国,制定标准如下:1.每一划面525条水平扫瞄线.2.每秒30张(frame)3.采交错式扫瞄(_ccir pal

征集玩家排版_征集作家：开放式食品和饮料＆LISA15演讲者访谈-程序员宅基地

文章浏览阅读84次。工具征集贴 11月，Opensource.com将推出两个新系列。是的，11月-现在是计划时间！我们邀请您发送电子邮件给我们，其中包括您的姓名，您想参加的系列以及您的故事构想，以做出贡献。您也可以提交到我们的网络表单。对我们来说写作是一个有趣而轻松的过程，只需阅读作家的推荐书即可。公开食品和饮料什么是开放式餐饮系列？打开容器？对于本系列，我们希望您了解有关使用..._什么是开放性食品

qt 嵌入pcl窗口可视化点云：_如何在qt找那个嵌入pcl点云显示窗口-程序员宅基地

文章浏览阅读5k次，点赞4次，收藏48次。qt 嵌入pcl窗口可视化点云：先来个总结：工作需要完成QT + pcl可视化点云，本文分别介绍了不同版本之间搭配安装所踩的坑，如果你的电脑系统比较新，安装的系统插件比较少，那应该还是可以很快装完的,本文主要详细介绍在高版本的ＱＴ的情况下其余插件的安装情况和遇到的坑，如果你装不成功，Don’t give up，你需要的只是一个纯净的系统而已！因为原来装了很多软件的系统有些依赖或者库可能版本不..._如何在qt找那个嵌入pcl点云显示窗口

access 2000 转换为97_转换为access 97-2003 数据库-程序员宅基地

文章浏览阅读1.1k次。参考这篇文章 http://65.54.166.79/kb/241709/zh-cn 当转换是出现无效的字段数据类型参考这篇文章：http://support.microsoft.com/kb/887032/zh-cn 其实，就是将数据库中的字段的数据类型是数字字段大小是 decimal （小数）的改为double 就可以了 _转换为access 97-2003 数据库

随便推点

【Linux】命名管道&命名管道和匿名管道的对比&命令行中的管道_程序中使用管道,跟命令行中管道一样吗-程序员宅基地

文章浏览阅读460次。注意:实现服务端(server)和客户端(client)之间的通信之前,我们需要先让服务端运行起来,让服务端运行后创建一个命名管道文件,然后再以读的方式打开该命名管道文件,之后服务端就可以从该命名管道当中读取客户端发来的通信信息了。对于如何让客户端和服务端使用同一个命名管道文件,这里我们可以让客户端和服务端包含同一个头文件,该头文件当中提供这个共用的命名管道文件的文件名,这样客户端和服务端就可以通过这个文件名,打开同一个命名管道文件,进而进行通信了。_程序中使用管道,跟命令行中管道一样吗

“Makefile:2: *** missing separator. Stop.“错误如何解决-程序员宅基地

文章浏览阅读1k次。这是因为在Makefile文件中，命令（如build、run、clean等）必须以【tab】键开始。所以检查一下Makefile文件里，命令之后是否以【tab】键开始，而不是空格，如果是空格，改成【tab】键。为啥会出现上述错误？_makefile:2: *** missing separator. stop.

DBeaver设置Maven镜像仓库_dbeaver maven-程序员宅基地

文章浏览阅读2.7k次，点赞4次，收藏5次。那么这个问题怎么处理呢？其实，DBeaver下载驱动包时会去Maven的镜像仓库查找，那么我们把镜像仓库设置成阿里或者国内其他的代理镜像仓库，就可以加速我们镜像包的下载。在我们首次使用DBeaver连接数据库时，它会去下载对应的数据库驱动包，但是有时候却怎么也下载不下来，导致DBeaver没办法使用。添加完成后，我们选中，往上移，移至第一行，然后点击应用并关闭，此时，再去加成驱动包，速度简直飞快啊。打开窗口->首选项->连接->驱动->Maven。然后点击添加，输入阿里镜像地址即可。_dbeaver maven

oled屏无法显示问题_oled程序下载了不显示-程序员宅基地

文章浏览阅读9.3k次，点赞5次，收藏9次。oled屏无法显示时，请用万能表量下屏的电源脚、IIC脚，看下是不是3.3v。电压、电流不足会导致屏幕无法显示。在开发项目时，屏的电源脚是通过线性稳压器(LDO)去控制的，在程序初始化时，打开LDO，发现屏幕还是不显示。最后发现是程序跑得太快，在屏还没上电就开始屏幕的初始化，所以导致屏无法显示。解决方法，gpio使能LDO后，延时5毫秒左右，再去屏幕初始化。当然可能其他的单片机不会出现这种问题，我用的wb32主频是96M的，速度快，所以会出现这种问题。..._oled程序下载了不显示

php5.5版本数据库函数,array_column php 函数自定义版本 php_version<5.5-程序员宅基地

文章浏览阅读90次。if(!function_exists(‘array_columns‘)){/** array_column() for PHP 5.4 and lower versions*/function array_columns($input,$column_key,$index_key=‘‘){if(!is_array($input)) return;$results=array();if($colu..._array_column' is available starting with 5.5 php version

Deeplearning4j（DL4J）是一个开源的Java深度学习库，它为神经网络和深度学习算法提供了Java和Scala API-程序员宅基地

文章浏览阅读380次。Deeplearning4j（DL4J）是一个开源的Java深度学习库，它为神经网络和深度学习算法提供了Java和Scala API。DL4J是由Skymind公司开发的，该公司专注于为机器学习和人工智能应用提供商业智能工具。_dl4j