主题
今天讲解的主题是css中的z-index属性，为什么要讲解这个属性呢？因为详细了解这个属性能够帮助我们解决遇到的一些和层级相关奇怪的问题。

介绍
属性作用：
z-index属性是用来设置元素的堆叠顺序或者叫元素层级，z-index的值越大，元素的层级越高，了解过ps的都知道，图片ps就是通过一层又一层的图片覆盖得来的。当元素发生重叠时，层级高的元素会覆盖在层级低的元素上面，使层级低的元素的重叠部分被遮盖住。

当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素做比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。

当父元素未设置z-index属性，子元素的z-index属性与父元素外的所有外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准，进行对比。

取值范围：
z-index属性的值分为三种：auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的情况下，取值范围为-2147483584~2147483584，数值越大，层级越高，数值越小，层级越低，inherit：继承父元素的z-index的属性值。

适用范围：
z-index属性只能在设置了position：relative | absolute | fixed 的元素或父元素设置了display: flex 属性的子元素中起作用，在其他元素中是不作用的。

遇到问题
在页面中添加el-dialog组件时，展开的时候，遮罩层会覆盖弹框的内容。el-dialog如下

<!-- 添加或修改字典对话框 -->
<el-dialog class="addOrEditDialog" :title="title" :visible.sync="open"  width="500px">
...
</el-dialog>

此时审查元素，我们发现会在body元素下新增一个遮罩层元素，且z-index的值确实比el-dialog的值低。按道理是应该在他上面的。

分析原因
在熟悉上面的z-index介绍后，相信大家都能轻松解决这个bug，会出现el-dialog的z-index值比遮罩层的z-index值大，但是又被遮罩层给挡住的情况，肯定是el-dialog元素的某个父元素有设置z-index属性值，且比遮罩层的z-index值小。审查元素后，果然如此,如下图所示

解决问题
知道什么原因后，如何解决问题呢？
1. el-dialog添加属性append-to-body，使dialog自身和遮罩层一样被插入到body元素下。
弊端：由于我们会在el-dialog中加入许多元素，由于加入到body元素外，脱离了项目主元素#app下，样式修改更加困难。因此不建议使用此方式解决问题

2. 将el-dialog的父元素的z-index属性调整到比遮罩层的z-index高。此时会出现如下图所示结果

弊端：毫无疑问，遮罩层被父元素覆盖了，因此此方法也不行。
3. 去除el-dialog父元素的z-index属性，此方法能达到想要的效果。但是也有不足。
弊端：就是el-dialog的父元素设置z-index属性，肯定是有他的作用的，贸然去掉可能会造成不确定的问题出现。因此也不建议
4. 在el-dialog元素中添加属性 :modal-append-to-body=“false”, 让遮罩层也在#app元素里面。
这时就能达到想要的效果。

注意：如果又遇到遮罩层被旁边侧边栏盖住或者被头部盖住的情况，那就是遮罩层父元素设置了z-index属性，且比侧边栏或者头部的z-index属性值小的原因。将父元素的z-index值去掉，且保证侧边栏和头部的z-index值不比遮罩层的值大即可。

总结
一个月没更了，感谢持续关注的兄弟姐妹们。熟悉css属性的原理，能够让大家更轻松的解决css相关的bug。