如何使用CSS实现英文H1叠放在希伯来语H1文字上方的效果

开发者阿泽

2026-9-29

实现方案

这个需求完全可以实现，仅用基础CSS定位和层级属性即可完成，核心逻辑是通过父容器约束定位范围，再控制两个标题的层级关系，具体操作如下：

实现思路

给两个H1套一个共同的父容器，将父容器设置为position: relative作为定位参照物
两个H1均设置为position: absolute，脱离文档流后默认会在父容器左上角重叠
给上层的英文标题设置更高的z-index值，保证它显示在最上层
希伯来文作为下层衬底文本，可以降低透明度、调浅字体颜色，同时添加dir="rtl"属性适配希伯来文从右到左的排版规则

代码示例

HTML结构

<div class="text-stack">
  <h1 class="en-text">DESIGN</h1>
  <h1 class="he-text" dir="rtl">עיצוב</h1>
</div>

CSS样式

.text-stack {
  position: relative;
  /* 可根据需求调整父容器宽高、对齐方式 */
  width: fit-content;
  margin: 50px auto;
}
.text-stack h1 {
  margin: 0;
  font-weight: 900;
  font-size: 120px;
}
.en-text {
  position: relative;
  z-index: 2;
  color: #222;
  /* 如果需要和下层文本错位可以加偏移 */
  /* top: 10px;
  left: 10px; */
}
.he-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: #eee;
  /* 可根据设计调整下层文本的大小、偏移量 */
  font-size: 160px;
  opacity: 0.6;
}