使用CSS transform旋转首字母后层级过高无法被其他元素覆盖如何解决

这是CSS 层叠上下文（Stacking Context） 规则导致的：
当元素设置了非none值的transform属性时，浏览器会自动为该元素创建独立的层叠上下文，该元素的默认层叠层级会高于普通文档流元素、未触发特殊层叠上下文的浮动元素。
你当前的首字母同时满足float: left+transform两个条件，层级优先级远高于普通元素，所以会始终显示在最上层；移除transform后元素不再触发特殊层叠上下文，回归普通浮动元素的层级规则，其他元素就可以正常覆盖。

• 方案1：统一控制标题块的整体层级
  给标题父元素h1手动创建层叠上下文，设置低于覆盖元素的z-index即可：

h1 {
  position: relative;
  z-index: 1; /* 数值需小于需要覆盖它的元素的z-index */
}
.rotating-letter {
  float: left;
  transform: translate(0, .18em) rotate(-30deg);
}

• 方案2：提升覆盖元素的层级
  给需要盖住首字母的元素（比如你提到的左侧粉色区域）设置更高的层叠优先级：

/* 假设左侧粉色区域的类名为pink-area */
.pink-area {
  position: relative;
  z-index: 10; /* 数值只要大于标题区域的z-index即可 */
}

• 方案3：替换浮动布局规避层级叠加问题
  如果不需要依赖浮动做排版，可用inline-block实现同样的首字母对齐效果，避免浮动+transform叠加带来的层级异常：

.rotating-letter {
  display: inline-block;
  transform: translate(0, .18em) rotate(-30deg);
}

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