CSS实现文字置于文字后方的问题求助

问题核心是父元素创建了独立堆叠上下文，导致子元素的z-index无法相对于父元素的文本内容形成预期的层级关系。你给h1设置z-index: 999时，会触发堆叠上下文的创建，子元素的层级计算被限制在这个上下文内部，无法突破到父元素文本的后方。

可行实现方案1（相对定位） #

1. 移除h1的z-index（保留position: relative，此时z-index: auto不会创建堆叠上下文）
2. 将需要前置的文本（h llo）包裹在容器中，设置position: relative和z-index: 1，确保它能覆盖在后方元素之上
3. 给大号e的span设置position: relative和z-index: -1，让它处于前置文本的后方

示例代码：

<h1 style="text-align: center; letter-spacing: 4px; position: relative;">
  <span style="position: relative; z-index: 1;">h llo</span>
  <span style="color: #ccc; position: relative; z-index: -1; font-size: 70px; margin: 0 -22px;">e</span>
</h1>

可行实现方案2（绝对定位） #

如果需要更精准控制大号e的位置，可使用绝对定位脱离正常流，避免影响其他文本排版：

<h1 style="text-align: center; letter-spacing: 4px; position: relative; display: inline-block;">
  h llo
  <span style="color: #ccc; position: absolute; z-index: -1; font-size: 70px; left: 32%; top: 50%; transform: translate(-50%, -50%);">e</span>
</h1>

原理说明 #

• 当父元素不创建堆叠上下文（z-index: auto）时，子元素的z-index: -1会被渲染到父元素内容层下方、背景层上方，恰好处于前置文本的后方
• 前置文本容器设置z-index: 1，明确其层级高于后方的大号e

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