CSS позиционирование div один за другим

Question

Я пытаюсь создать целевую страницу, на которой я планирую разместить какое-то фиксированное фоновое изображение в виде слайд-шоу с фиксированной верхней частью, а затем еще один div с описанием того, о чем идет речь на сайте. Однако текущий код HTML и CSS помещает два элемента div друг на друга.

После проверки с помощью существующего кода и работы со свойством position и установки родительского div в качестве относительного положения с дочерним div в качестве относительного тоже не работает

.crossfade>figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
  z-index: -1;
  min-height: 700px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

#landing {
  position: absolute;
  top: 500px;
}

<div className="main">
  <div class="crossfade">
    <figure></figure>
    <figure></figure>
  </div>
  <div id="landing">
    <div className="container">
      <img />
    </div>
    <p> Hello </p>
  </div>
</div>

Ожидаемый CSS должен располагать два div один за другим, сохраняя слайд-шоу верхнего фонового изображения, а затем показывая второй div.

Answer 1

Я предполагаю, что первая часть вашего CSS предназначена для вашего <div class="crossfade">.Если это так, то у вашего кроссфейда и приземления <div> есть position: absolute, что, скорее всего, заставит их складываться друг на друга.

Если вы хотите, чтобы ваш кроссфейд и посадка находились рядом/ сверху вниз, я бы порекомендовал обернуть оба внутри внешнего <div> и использовать Flexbox.

.outer-container {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    
    /* Enable this if you want them to be top to bottom. */
    /* flex-direction: column; */
}

.crossfade, #landing {
    /* You might have to tweak the width based off of 
       margin, padding, and other dimensions. */
    width: 45%;
    height: 100px;
    border: 1px solid black;
}

<div class="outer-container">
    <div class="crossfade">Crossfade</div>
    <div id="landing">Landing</div>
</div>

Кроме того, я мог бы пояснить / привести пример для этого:

при сохранении слайд-шоу верхнего фонового изображения и последующем отображениивторой див