如何将一个DIV放置在另一个DIV下层？烟花效果置于中心文字下层求助

解决方案 #

实现烟花层放在文字下层的核心是通过z-index控制元素层叠顺序，只需要修改几处CSS代码即可，同时你提供的HTML有冗余闭合标签可以顺便清理：

需要调整的CSS代码：

/* 给父容器加定位，作为子元素的定位参照 */
.centro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin: 100px 0;
  position: relative; /* 新增这行 */
}

/* 给文字层加层级，确保在最上层 */
.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 新增这行 */
  z-index: 10; /* 新增这行，层级比烟花高即可 */
}

/* 调整烟花层定位和层级 */
.firework {
  display: flex;
  justify-content: center;
  position: absolute; /* 新增这行 */
  left: 50%; /* 新增这行，对齐父容器中心 */
  top: 50%; /* 新增这行，对齐父容器中心 */
  z-index: 1; /* 新增这行，层级低于文字层 */
}

/* 原来的transform合并为一行，避免属性覆盖 */
#firework1 {
  transform: scale(1) translateX(-60px) translateY(-150px);
}

修正后的HTML代码（删除冗余的两个</div>）：

<body>
  <div class="centro">
    <div class="text">
      <div class="center-text">
        compleanno di <span class="typing center-text"></span>
      </div>
    </div>

    <div class="firework" id="firework1">
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
      <div class="explosion"></div>
    </div>
  </div>
</body>

注意：z-index属性只对设置了非static定位（relative/absolute/fixed/sticky）的元素生效，这是新手控制层级时最容易忽略的点。调整后烟花就会显示在文字下方，不会遮挡中心的邀请文案。

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