html - 在使用 z-index 显示之前，让图层显示为透明的问题

Question

我有几组图层都设置为 position: absolute; 并且它们相互显示。我有 delays 和 fadeOut，所以它按顺序运行。出于某种原因，在我的最后一个显示层上，如果我将 z-index 设置为显示的数字，它会影响所有其他显示层，即使它没有显示。我的 background-color 只会有一个空白部分，有点像一个 block 。

这是它的代码。有问题的 div 是 home-learn。我尝试将 z-index 更改为高于其他层，等于和小于等于。每种不同的方式都会导致其自身的独立问题。

例如，现在我将它设置为 1 个 z-index 数字，小于它上面的层。这样做会导致它不显示，但如果我让它等于或大于，background-color 将超出 blue-home-text 的大小home-learn 的措辞。

有没有人看到我做错了什么？现场观看可能会有所帮助。在下面的评论中，我将添加实时站点。在序列完成后，您将在页面加载时立即看到它。

<div class="red">
 <div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
  <span class="hand-text">HELLO</span>
  <div class="circle">
    <div class="spinner top topright"></div>
    <div class="spinner top topleft"></div>
    <div class="spinner bottom bottomleft"></div>
    <div class="spinner bottom bottomright"></div>
    <div class="mask q2"></div>
    <div class="mask q4"></div>
  </div>
  <div id="circle-text">We're Optimum
    <br>Designs</div>
  <div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
  <!-- <div id="text-button"><span class="border-span">More About Us</span></div> -->
  <div id="home-learn">
    <div id="curtain-div"></div>
    Learn more...
  </div>
</div>

.red {
 background-color: #0085A1;
  width: 100%;
  height: 100vh;
  position: relative;
  text-align: center;
}

.hand {
  width: auto;
  height: auto;
  position: absolute;
  z-index: 100;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
  top: 60%;
  left: 50%;
  -webkit-animation: wave 4s 1 normal forwards;
  animation: wave 4s 1 normal forwards;
}

.hand-text {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  top: 42%;
  color: #FFF;
  font-size: 2em;
  font-weight: bold;
  opacity: 0;
  -webkit-animation: waveTxt 2s 0s 2 alternate;
  animation: waveTxt 2s 0s 2 alternate;
}

.circle {
  display: none;
  z-index: 99;
  width: 500px;
  height: 500px;
  position: absolute;
  background: inherit;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

.spinner {
  width: 250px;
  height: 250px;
  position: absolute;
  border: 5px solid #b5f2ff;
  z-index: 10;
}

#circle-text {
  display: none;
  position: absolute;
  color: #FFF;
  font-size: 2.3em;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
}

#blue-home-text {
  color: #FFF;
  display: none;
  text-align: center;
  position: absolute;
  margin: 0 25%;
  top: 50%;
  font-size: 2.3em;
  z-index: 99;
}

#home-learn {
  color: #FFF;
  position: absolute;
  text-align: center;
  /*margin: 0 25%;*/
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 2.3em;
  z-index: 98;
}

Answer 1

在查看您的代码后，我相信以下 CSS 应该有助于解决布局问题。这应该避免窗帘层显示在蓝色主页文本的顶部。

#home-learn {
   z-index: 99;
}

#blue-home-text {
   z-index: 100;
}