transform 与 z-index 冲突

为什么 z-index 会因为 transform 而失效呢? 其实很多时候在项目中会会出现乱用 z-index 的情况, 归根结底还是不太清楚其本质, 失效的结果是设置样式的元素未按我们的预期来排布, 那我们就来分析一下为什么?

冲突产生的原因代码, 具体就不上 DOM 节点了
```
parent {
transform: translateY(-50px);
}
child {
position: fixed;
z-index: 100
}
groundFather {
position: fixed;
z-index:99
}
```
层叠上下文

层叠上下文: 如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上层级会高一点, 类似 js 的执行上下文, 先全局在局部的道理...

创建层叠上下文:


1.默认创建层叠上下文(html: 根层叠上下文元素)

2.需要配合 z-index 触发创建层叠上下文(position和 flex子元素) 注意: 设置 position: relative 的时候 z-index 的值为 auto 会生效

3.不需要配合 z-index 触发创建层叠上下文( CSS3 中新增的属性来触发) 元素的透明度 opacity 小于1 元素的 mix-blend-mode 值不是 normal 元素的以下属性的值不是 none： transform filter perspective clip-path mask / mask-image / mask-border 元素的 isolution 属性值为 isolate 元素的 -webkit-overflow-scrolling 属性为 touch 元素的 will-change 属性具备会创建层叠上下文的值

当一个DOM元素创建了层叠上下文后, 该元素可以理解局部层叠上下文，它只影响其子孙代元素，它自身的层叠水平是由它的父层叠上下文所决定的

## 7阶层叠水平层叠顺序
一个 DOM 元素，在不考虑层叠上下文的情况下，会按照层叠水平决定元素在 z 轴上的显示顺序;
也就是说不同的 DOM 元素组合在一起发生重叠的时候，它们的的显示顺序会遵循层叠水平的规则，
而 z-index 是用来调整某个元素显示顺序，使该元素能够上浮下沉

- 7阶层叠水平层叠顺序, 依次是

层叠上下文的background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或看成z-index：0 < 正z-index

## 如何比较两个元素的层叠顺序:

1.如果是在相同的层叠上下文，按照层叠水平的规则来显示元素

2.如果是在不同的层叠上下文中，先找到共同的祖先层叠上下文，然后比较共同层叠上下文下这个两个元素所在的局部层叠上下文的层叠水平。


冲突的本质就是层叠顺序与预期的不一致导致的, 我们按照上面的规则分析出来后, 就可以解决了...

## 参考
[张鑫旭的z-index](https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)

adodo0829 / blog

z-index 冲突带来的思考(css 层叠上下文) #79

transform 与 z-index 冲突

层叠上下文