title: HTML overlapping div elements
body: <p>I'm making a website that has a series of offset cards, one with image and one with text and I want to alternate the offset for each line. The only issue is I can't quite figure out how to (while keeping both in the wrapper) make the image smaller than the wrapper in height so that the text card can be at the top and overlap the top and side, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Msmvp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Msmvp.jpg" alt="enter image description here"></a></p>
  
  <p>Sorry for the image layout, it was supposed to be landscape. Anyway, the way I have it now, the parent and child are both at the top of the wrapper. I want it so that the text (child) is at the top and the image is slightly shorter so that I get the overlap/overlay effect from the text box on the top as well as the right. I also need to make sure, for responsiveness, that they stay inside the wraper. How should I fix that?</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>#wrapper{
    background-color:green;
  }
  
  #parent{
    width: 500px;
    height:400px;
    border: 4px solid blue;
    background-size:cover;
  }
  #child{
    width:300px;
    height:200px;
    border: 3px solid red;
    position:relative;
    top:0%;
    left:80%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;  
    &lt;div id="wrapper"&gt;
      &lt;div id="parent"&gt;
        &lt;div id="child"&gt;
        This is my overlapping Text
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>