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

Question

I would like to have some text next to an element that has a position of relative and children with positions of absolute. Following Tania Rascia's tutorial I have created 2 crossfading images, it uses position:absolute to put the images on top of each other, so that they can fading into each other. However, because position:absolute takes the iamges out of the 'flow' or the page, this means that the text from the page is behind the crossfading images.

I have tried applying display:inline-block to the parent of the images and the images themselves, but this hasn't changed anything. I am still new to CSS any tips would be helpful.

.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

I resolved this by moving the width and height properties off the child images, to the parent container that held the slideshow.

This should be aesthetically the same but help the document understand how large the slideshow is.

.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>