相对于div的重叠式加载器问题

Question

我正在尝试创建相对于div的 Overlay Loader 。但是问题在于，如您在代码段中所见，在示例中添加了其他标签，例如<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>