z-index踩坑记录

近日碰到了个z-index失效的问题。

//类似这么个dom结构
  <div class="family">
      <div class="father">
        爸爸
        <div class="son">儿子</div>
      </div>
      <div class="grandpa">爷爷</div>
  </div>

期望的效果是三个图形重叠，father添加overflow:hidden，son在最顶层显示，grandpa盖住father，son又盖住grandpa。

爷爷自然层叠上下文在father之上，为了让son在最顶层，添加z-index。但是试了各种改动，z-index不生效。

网上普遍的说法有

1. 没有定位（非static）
2. 父元素层叠上下文太小
3. 问题标签含有浮动(float)属性。
4. 父标签 position属性为relative；
5. flex影响z-index

......

等等等等

以上应该确实有他的应用场景，但是逐一尝试了都无效，最终发现去掉transform成功解决

查阅发现，设置一些CSS属性（opacity or transform）会将元素置于新的堆叠上下文中。会使元素的行为就像z-index为0。

参考