将块文本定位在 'position:relative' 元素和 'position:absolute;' 子元素旁边

Question

我想在具有相对位置的元素和具有绝对位置的子元素旁边添加一些文本。在 Tania Rascia's tutorial 之后，我创建了 2 个淡入淡出图像，它使用 position:absolute 将图像放在彼此之上，以便它们可以相互淡入淡出。但是，因为 position:absolute 从 'flow' 或页面中取出图像，这意味着页面中的文本位于淡入淡出图像的后面。

我已经尝试将 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>

将块文本定位在 'position:relative' 元素和 'position:absolute;' 子元素旁边

Position block text next to element with 'position:relative' and children with 'position:absolute;'

html

css

position

css-position