位置块文本旁边的元素与‘位置:相对’和子与‘位置:绝对；’

Question

我希望在一个元素旁边有一些文本，这个元素的位置是相对的，而子的位置是绝对的。在Tania Rascia教程之后，我创建了两个交叉衰落图像，它使用position:absolute将图像放在另一个图像上，这样它们就可以互相褪色。但是，因为position:absolute从'flow‘或页面中删除了iamges，这意味着页面中的文本位于交叉衰落图像的后面。

我尝试过将display:inline-block应用于图像的父级和图像本身，但这并没有改变任何事情。我仍然是新的CSS任何技巧都会有帮助。

​

.cross-fade {
  position: relative;
}

.cross-fade img {
  position: absolute;
  width: 510px;
  height: 350px;
}

.top {
  animation-name: fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.crossfade-images img.top {
  animation-name: crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

<div class="img-text-container">
  <section class="cross-fade">
    <img class="bottom" alt="" src="//unsplash.it/300/300">
    <img class="top" alt="" src="https://picsum.photos/300/300">
  </section>

  /*This is the text that is being hidden by the images*/

  <div>
    <div>
      <pre><div id="pre-div">Text goes in here. Hello! Welcome to my website.</div></pre>
    </div>
  </div>
</div>

​

Answer 1

我通过将width和height属性从子映像移到保存幻灯片的父容器来解决这个问题。

这应该在美学上是相同的，但帮助文档了解幻灯片有多大。

​

.cross-fade {
  position: relative;
  width: 510px;
  height: 350px;
}

.cross-fade img {
  position: absolute;
  height: 100%;
  width: 100%;
}

.top {
  animation-name: fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.crossfade-images img.top {
  animation-name: crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

<div class="img-text-container">
  <section class="cross-fade">
    <img class="bottom" alt="" src="//unsplash.it/300/300">
    <img class="top" alt="" src="https://picsum.photos/300/300">
  </section>

  /*This is the text that is being hidden by the images*/

  <div>
    <div>
      <pre><div id="pre-div">Text goes in here. Hello! Welcome to my website.</div></pre>
    </div>
  </div>
</div>

​