CSS transform与position sticky叠加使用时元素层级异常问题

底层原因 #

这个异常是CSS层叠上下文（Stacking Context）的规则导致的：

1. 元素设置非none的transform属性时，会自动创建一个新的层叠上下文，该层叠上下文的默认层叠等级等同于z-index: 0的定位元素。
2. 你代码中的position: sticky头部没有显式设置z-index，默认值为auto，不会创建独立层叠上下文，层叠等级低于z-index: 0的层叠上下文。
3. 同一个父容器内的层叠等级优先级：显式声明了z-index: 0的层叠上下文 > 无z-index的定位元素，再加上.the-problem元素的DOM顺序在header之后，最终就出现了transform元素盖在sticky头部上方的现象。

解决方案 #

保留transform旋转效果的前提下，有两种常用修复方案：

• 方案1（最推荐）：给sticky头部显式设置正z-index，提升它的层叠等级：

.header {
  height: 100px;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  background-color: aqua;
  z-index: 1; /* 新增这行即可 */
}

• 方案2：如果不能修改header的样式，给transform元素的父容器创建层叠上下文并设置低于header的层级：

.long-content {
  height: 600px;
  padding-left: 15px;
  position: relative;
  z-index: 0; /* 新增这两行，让内部transform元素的层级被限制在父容器内，不会超过header */
}

内容的提问来源于stack exchange，提问作者EGN