CSS：将文本放在文本后面[重复]

Question

灵感来自：view-source：https://vsociety.net/我想使用 z-index 将文本实例放在另一个文本实例后面。 显然我不能在不使用 position 属性的情况下使用 z-index 。 这是我的代码：

<h1 style="text-align: center; letter-spacing: 4px; position: relative; z-index: 999">h

  <span style="color: #ccc; position: relative; z-index: -1; font-size: 70px;">e</span> llo

</h1>

此代码无效。我使用搜索引擎进行了搜索并询问了 ChatGPT3，但没有找到针对我的具体问题的答案；我发现的只是“文字背后的图像”的实例。

如果你能指出我正确的方向，我将不胜感激。

我尝试使用 z-index 将文本定位在文本后面，这样 hello 中的“e”虽然看起来更大，但会被放置在其余的“hello”后面。我的意图是“h - llo”将作为一种设计形式与更大的“e”重叠。我将

position: relative;

与

z-index: -1;

结合使用，这并没有将“e”放在“h - llo”后面。我也试过

position: absolute;

类似的结果。

<h1> contains the whole word and was originally given 

z-index：999；

 and the *span* containing the letter e was given ``z-index: -1;

有那么一刻我认为这可能是算术问题，对于 +999 + -1 = +998，它不会为 span 标签产生负“层位置” .然而，给 h1 标签一个 z-index 为 1 和 span 标签一个 z-index 为 -2 并没有解决问题。 span 标签包含 e 并嵌套在 h1 标签中，h1 标签包含整个单词 hello.

Answer 1

.all-text {
  position: relative;
}

.text-hllo {
  position: relative;
  text-align: center;
  letter-spacing: 4px;
  font-size: 2em;
  font-weight: bold;
  z-index: 1;
}

.text-e {
  position: absolute;
  letter-spacing: 4px;
  font-weight: bold;
  color: #ccc;
  font-size: 70px;
  left: 50%;
  top: 50%;
  transform: translate(-83%, -60%);
}

<div class="all-text">
  <div class="text-hllo">h llo</div>
  <div class="text-e">e</div>
</div>