背景
默认情况下，z-index越大，肯定能显示在上层，但在有些情况下并不能按照预期。
情况1 ：按照元素的加载顺序（大于z-index的数值比较）
加载顺序大于z-index的值(都是相对文档流的时候)，就是后面出现的元素，其展示会覆盖在之前的元素上面，哪怕z-index设置的值比较大。
情况2 ：非static的位置关系
我们最常见的是绝对定位，固定位置，以及relative，他们都能改变原来简单的层叠解析关系，让z-index生效。
情况3 ： 增加transform 或者 opacity 让其处于新的样式层叠上下文
比如transform:rotate(190deg) ，可能会让原本的已经处于元素下层的内容重新浮现于上层。官方的说明链接
所以稳妥的情况还是要增加z-index的更低值保证。
情况4：父元素的较低z-index 影响子元素
比如父元素容器的z-index为1，子元素的z-index为100，另一个与父元素的统计的元素的z-index为10，虽然子元素的z-index为100，但是仍然不能覆盖另外一个元素。
解决方案：
1 抬高父元素的z-index
2 将需要展示在上层的元素放到原来的外层并列的元素中，这也是大多数模态框的设计技巧。
若有收获，就点个赞吧
0 人点赞
