相对于 div 的覆盖加载器有问题

Question

我正在尝试创建一个相对于div的覆盖加载器。但问题是，正如您在代码片段中看到的那样，当我在示例中添加一些其他标签（例如 <h1> 和 <p>）时，它会向下推动覆盖。但我正在尝试在父div上覆盖并使其内容。

.myTestDiv {
  width: 500px;
  height: 500px;
  border: 2px solid red;
}
h1 {
  text-align: center;
  color: blueviolet;
}
.spinner-box {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: 1px dashed black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(1, 130, 250, 0.315);
}
.pulse-container {
  width: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}
.pulse-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3f90f9;
}
.pulse-bubble-1 {
  animation: pulse .4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
  animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3 {
  animation: pulse .4s ease .4s infinite alternate;
}
@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

<div class="myTestDiv">
  <h1>A heading</h1>
  <p>A Paragraph</p>
  <div class="spinner-box">
    <div class="pulse-container">
      <div class="pulse-bubble pulse-bubble-1"></div>
      <div class="pulse-bubble pulse-bubble-2"></div>
      <div class="pulse-bubble pulse-bubble-3"></div>
    </div>
  </div>
</div>

如何解决这个问题？

Answer 1

这是你要找的吗？现在将其覆盖在任何文本上。

.myTestDiv {
  width: 500px;
  height: 500px;
  border: 2px solid red;
  position: relative;
}
h1 {
  text-align: center;
  color: blueviolet;
}
.spinner-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: 1px dashed black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(1, 130, 250, 0.315);
}
.pulse-container {
  width: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}
.pulse-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3f90f9;
}
.pulse-bubble-1 {
  animation: pulse .4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
  animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3 {
  animation: pulse .4s ease .4s infinite alternate;
}
@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

<div class="myTestDiv">
  <h1>A heading</h1>
  <p>A Paragraph</p>
  <h1>aaasdfsdfsdfsdfsdfaaa</h1>
  <div class="spinner-box">
    <div class="pulse-container">
      <div class="pulse-bubble pulse-bubble-1"></div>
      <div class="pulse-bubble pulse-bubble-2"></div>
      <div class="pulse-bubble pulse-bubble-3"></div>
    </div>
  </div>
</div>