How to prevent content showing up under overlapping elements - html

Question

I have a hero image that has an overlapping box and I'm trying to add content outside of the box. However when I try to add any content below the overlapping box the content shows up behind the box instead of below. How can I make the content show below the box with responsiveness in mind?
.shell {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #FFF;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #FFF;
max-width: 85%;
position: absolute;
top: 80%;
}
body {
margin: 0;
font-family: sans-serif;
}
<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>

Answer 1

I'd create a .wrapper for everything that falls after .shell and add padding-top to the .wrapper.
section {
padding-bottom: 1rem;
position: relative;
}
.shell {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* overlap */
.shell:before {
content: "";
background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
height: 300px;
width: 100%;
}
.shell-header {
color: #FFF;
padding: 0px 20px;
}
.shell-body {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
background-color: #FFF;
max-width: 85%;
position: absolute;
top: 80%;
}
body {
margin: 0;
font-family: sans-serif;
}
.wrapper {
padding-top: 9rem;
}
#media only screen and (min-width: 800px) {
.wrapper {
padding-top: 6rem;
}
}
#media only screen and (max-width: 360px) {
.wrapper {
padding-top: 11rem;
}
}
<section>
<div class="shell">
<div class="shell-header"></div>
<div class="shell-body">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</div>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
</div>
</section>