title: position division underneath "absolute" text container
body: <p>I would like to have an overlay above an image, which as far as I figured position:absolute is the only option. Now the text underneath is getting overlapped by the overlay as soon as the screen-width is below a certain threshold. How can I prevent this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-and-image {
    position: relative;
    margin-left: 5%;
    width: 90%;
    max-height: 80vh;
    display: flex;
    margin-bottom: 10vh;
  }
  
  .text-and-image-box{
    width: 100%;
    position:relative;
    height: auto;
    max-height: 75vh;
    overflow:hidden;
  }
  
  .text-and-image-image{
    width: 100%;
    object-fit: cover;
  }
  
  
  .text-and-image-box2{
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 40%;
    left: 55%;
    width: 40%;
    padding: 3%;
    background: white;
  }
  
  .text-section{
    position: relative;
    width: 70%;
    margin-left: 15%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="text-and-image"&gt;
  
    &lt;div class="text-and-image-box"&gt;
      &lt;img class="text-and-image-image" src="https://images.unsplash.com/photo-1514986888952-8cd320577b68?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80"&gt;
    &lt;/div&gt;
  
    &lt;div class="text-and-image-box2"&gt;
  
      &lt;h3 class="text-and-image-text"&gt;Ein schlechtes Messer fährt leichter in die Hand als ins Brot."&lt;/h3&gt;
      &lt;p class="text-and-image-text"&gt;Jeder Hobby- oder Profikoch braucht gutes Werkzeug. Nur damit macht es Spaß und ist sicher. Solinger Küchenmesser und Stahlwaren bestechen schon seit Jahrhunderten durch ausgezeichnete Qualität, hohe Langlebigkeit und innovative Lösungen. Das merkt man und hat seinen Weg schon in Millionen von Küchen in aller Welt gefunden. Unser Statement: &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="text-section"&gt;
   &lt;h1 id="main-headline"&gt; Bestes deutsches Traditionshandwerk für Ihre Kunden &lt;/h1&gt;
   &lt;h2 id="sub-headline"&gt;Küchenmesser &amp; Stahlwaren&lt;/h2&gt;
   &lt;p class="information"&gt;
    Ihre Kunden haben eine hohe Erwartung an Sie
  &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>