CSS positioning div one after another - html

Question

I am trying to create a landing page where I am planning to position some fixed background image as a slideshow fixed at top and then another div with where it goes what the website is about. However the current HTML and CSS code puts the two divs on top of each other.
Upon checking with the existing code and working with the position property and setting the parent div as relative position with the child divs as relative doesn't work either
.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>
The expected css should be placing the two divs one after another while preserving the top background image slideshow and then showing the second div.

Answer 1

I assume the first part of your CSS is for your <div class="crossfade">. If so, your crossfade and landing <div>'s both have position: absolute, which is most likely causing them to stack on top of each other.
If you want your crossfade and landing side-by-side / top-to-bottom, I would recommend wrapping both inside an outer <div> and use 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>
Also, I could you clarify/provide an example for this:
while preserving the top background image slideshow and then showing the second div