小心 CSS3 Transform 引起的 z-index "失效"

先来观察下现象, 再分析问题的具体原因
一个元素添加 transform和不添加 transform对 z-index 会造成影响!


没有使用CSS3 transform 之前 z-index 很正常




使用了CSS3 transform 后 z-index 有些"异常"了, 失效了吗?


具体代码请参考 css-transform-stacking-context.html


在参考了很多资料后, 终于弄明白了, 一切的真相都与stacking context有关, z-index 其实没有失效!
**要解决这个问题, 只能删除 transform 样式.**
 > CSS3 Transform create new stacking context


CSS3 Transform 形成了新的 stacking context
造成 top-el 的 z-index 针对于这个新的 stacking context
而不是原来的 default stacking context (html)
**因此让人感觉 z-index 失效了似得, 其实不是失效, 只是换了场地(stack)**


首先, 界面上的布局是这样的, 元素都处于默认的 stacking context
1. parent element(简称PE) 与 sibling element(简称SE) 是同级的
2. SE 由于使用了 z-index, 因此层级比 PE 高
3. child element(简称CE) 使用了高于 SE 的 z-index, 因此层级高于 SE


当给 PE 添加了 transform 后, stack的情况就变化了
1. PE 的 transform 让其形成了新的 stacking context
2. CE 是 PE 的子元素, 因此 CE 处于这个新的 stacking context
3. CE 的 z-index 现在影响的也是这个新的 stacking context
4. 现在 SE 与 CE 的 z-index 作用的 stacking context 都不一样, 因此不具可比性
5. 由于 SE 层级高于 PE, 因此 PE 的子元素层级怎么样都会低于 SE
6. 因此给 CE 设置任何的 z-index 都无法改变这种处境, z-index 不可能跨 stacking context

7. 因此以后设置 z-index, 首先要想一想它的 stacking context 在哪里

解决方法：防止需要设置transform 属性的上级标签带有transform 属性