Struggling to design a landing page with a fixed background slideshow followed by a div explaining the website's purpose, I encountered an issue where the two divs overlap due to the current HTML and CSS code.
Even after experimenting with different position properties and setting the parent div as relative with the child divs also as relative, the problem remains unresolved.
.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 desired outcome is to have the two divs display sequentially without overlapping, with the top background image slideshow intact and the second div following suit.