弹窗被自己的半透明黑色这招遮挡了，使用过elementUI的都知道，这个黑色遮罩是独立的存在与body根元素的，而dialog是存在于触发此弹窗的元素的同级的，一般elementUI会自动给dialog定位为fixed，黑色遮罩也是fixed，然后自动设置dialog的z-index比遮罩高一点，如下：
从上图可以看出，的确如此。但是为什么命名dialog的z-index比遮罩高，还是被遮罩遮挡。fixed按理说和absolute不一样，是不用看父级是否定位的。但事实是打脸的，包含dialog的父级定位了，影响了dialog的z-index，提高点就能显示出dialog了：
但是这样，dialog的父级header也会超出遮罩，这并不是我想要的。后来经过测试，将header的z-index去除了，就可以了。真的好奇葩的问题：
有知道的，可以在下方留言，告知我这是为什么？！
2020-10-25补充：element ui已经考虑过这种情况，只要在引用组件时，加入“:modal-append-to-body='false'”就能解决上面的问题，原理也很简单，加上这个属性，在生成dialog时，dialog的所有内容，都会放到body根节点，这样，就不会产生上面的干扰，dialog主体也肯定会盖住遮罩的。
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！