如何将一个 DIV 放在另一个 DIV 后面？答案

【问题标题】：how can i put one DIV behind another?如何将一个 DIV 放在另一个 DIV 后面？
【发布时间】：2021-12-20 10:26:37
【问题描述】：

我正在做我的第一个项目，但我在使用 div 时遇到了一些问题：我想把烟花放在中心文本后面，但我不明白该怎么做。你能帮帮我吗？

我必须写更多细节，否则我无法上传问题。如果你想知道我的项目是关于什么的，这就像我 18° 生日的生日邀请，我正在尝试做一些不同的事情。

这是代码，谢谢。

body {
  background-color: blue;
}

.centro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin: 100px 0;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-text {
  color: #E7ECEF;
  text-align: center;
  font-size: 50px;
  text-shadow: 3px 2px 1px rgba(0, 0, 0, .3);
  width: 30%;
}

.firework {
  display: flex;
  justify-content: center;
}

.explosion {
  position: absolute;
  width: 2px;
  height: 40px;
  transform-origin: 50% 100%;
  overflow: hidden;
}

.explosion:nth-child(1) {
  transform: rotate(0deg) translateY(-15px);
}

.explosion:nth-child(2) {
  transform: rotate(30deg) translateY(-15px);
}

.explosion:nth-child(3) {
  transform: rotate(60deg) translateY(-15px);
}

.explosion:nth-child(4) {
  transform: rotate(90deg) translateY(-15px);
}

.explosion:nth-child(5) {
  transform: rotate(120deg) translateY(-15px);
}

.explosion:nth-child(6) {
  transform: rotate(150deg) translateY(-15px);
}

.explosion:nth-child(7) {
  transform: rotate(180deg) translateY(-15px);
}

.explosion:nth-child(8) {
  transform: rotate(210deg) translateY(-15px);
}

.explosion:nth-child(9) {
  transform: rotate(240deg) translateY(-15px);
}

.explosion:nth-child(10) {
  transform: rotate(270deg) translateY(-15px);
}

.explosion:nth-child(11) {
  transform: rotate(300deg) translateY(-15px);
}

.explosion:nth-child(12) {
  transform: rotate(330deg) translateY(-15px);
}

.explosion:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 2px;
  height: 20px;
  animation: explosion 4s ease-in-out infinite;
}

@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

#firework1 {
  transform: scale(1);
  transform: translateX(-60px) translateY(-150px);
}

#firework1 .explosion::before {
  background-color: #ffde71;
  animation: explosion 2s ease-in-out infinite;
}

<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>
  </div>
  </div>
</body>

【问题讨论】：

应用 z-index: 2;到你的文字。 developer.mozilla.org/en-US/docs/Web/CSS/z-index
不确定我是否理解您所说的“背后”的意思。是在 z 方向（在这种情况下，请注意堆叠上下文，这可能意味着 z-index 不起作用）还是您希望烟花更多地“在”文本中（目前在大屏幕上显示在文本上方，在较小的屏幕上仅略微重叠）。

标签： javascript html css flexbox

【解决方案1】：

您可以使用 z-index 元素将其移到前面。

.text {
display: flex;
flex-direction: column;
align-items: center;
z-index : 5;

}

【讨论】：