CSS transform旋转元素覆盖fixed定位元素，如何让fixed元素层级最高？

问题根因 #

这个现象是CSS层叠上下文的规则导致的：

1. 当元素的transform属性值不为none时，会自动创建新的层叠上下文，层叠优先级高于普通文档流元素
2. 你的.child虽然设置了position: fixed，但没有显式指定z-index属性，层叠优先级和同样创建了层叠上下文的.one处于同一等级
3. 由于.one在DOM树中的位置晚于.child，按照层叠规则，后出现的同优先级元素会覆盖先出现的元素，所以.one会叠在.child上方
4. 而.two没有设置特殊属性，属于普通文档流元素，层叠优先级低于固定定位元素，因此表现正常，会被.child盖住

解决方案 #

只需要给.child设置一个大于等于1的z-index值，提升它的层叠优先级即可，修改后的CSS代码如下：

.parent {
  width: 100%;
  height: 100%;
}
.child {
  position: fixed;
  width: 100%;
  background-color: blue;
  z-index: 999; /* 新增此行，数值只要大于其他创建了层叠上下文的元素的z-index即可 */
}
.one {
  text-align:left;
  transform: rotate(2deg);
}
br {
  display: block;
  line-height: 220px;
}

HTML代码无需调整，修改后.child就会固定显示在所有元素的最上层。

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