Hero image with overlapping text box content appearing behind text box. How can I fix without using-CodePudding

I have a hero image that has a text box overlapping the hero a little bit but when I add any content below the box it appears under the text box. Some media queries are added in my code below and it works but I feel like there has to be a way to contain the hero and overlapping text box into its own section. If had to add more text I'd have to go through and adjust all of the media queries to make it look good again so how can I achieve this without using media queries?

Here is my code:

.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%;
}
img {
  width: 20%;
  height: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.wrapper {
  padding-top: 12rem;
}

@media only screen and (min-width: 800px) {
  .wrapper {
    padding-top: 8rem;
  }
}

@media only screen and (max-width: 360px) {
  .wrapper {
    padding-top: 11rem;
  }
}

<div >
  <div ></div>
  <div >
    <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 >
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>

CodePudding user response：

Using padding is ideal. But you can play around with the positioning of your elements. For instance, you can set body to position: relative; & then nest .wrapper within .shell and set .wrapper to position: absolute;.

.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 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%;
}

img {
  width: 20%;
  height: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0;
  font-family: sans-serif;
  position: relative;
}

.wrapper {
  position: absolute;
  bottom: -80%;
}

<div >
  <div ></div>
  <div >
    <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 >
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
  </div>
</div>

Example using negative margin.

.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* 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%;
  margin-top: -6.375rem;
  position: relative;
  z-index: 1;
}

img {
  width: 20%;
  height: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0;
  font-family: sans-serif;
  position: relative;
}

.wrapper {
  margin-top: 1em;
}

<div >
  <div ></div>
  <div >
    <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 >
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>