如何实现左侧字母在上、右侧字母在下的文字重叠效果？

要让左侧字母覆盖右侧字母，你需要先解决 z-index 无效的问题——z-index 仅对设置了定位属性的元素生效，默认的 inline 元素（比如你用的 span）不支持 z-index 层级控制。

解决方法 #

给每个包裹字母的 <span> 添加 position: relative，这样 z-index 就能正常发挥层级作用，再结合 letter-spacing 或者定位偏移调整重叠效果：

修改后的代码 #

CSS

@font-face {
  font-family: 'CloudySunday';
  src: url('https://fritzfromtechsupport.com/fonts/CloudySunday.ttf') format('truetype');
}

HTML

<div>
  <p style="letter-spacing: -0.8rem;font-family: 'CloudySunday';">
    <span style="position: relative; z-index: 1000;color: green;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      h
    </span>
    <span style="position: relative; z-index: 100;color: red;font-size: 70px;filter: drop-shadow(0px 2px black) drop-shadow(0 -2px black) drop-shadow(2px 0 black) drop-shadow(-2px 0 black);">
      i
    </span>
  </p>
</div>

原理说明 #

添加 position: relative 后，span 元素进入了定位上下文，此时 z-index 的数值越大，元素层级越高，就能实现左侧字母（z-index:1000）覆盖右侧字母（z-index:100）的效果。如果需要更精准的重叠位置，还可以给右侧 span 添加 left: -Xpx 这样的偏移值来微调。

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