HTML overlapping div elements

Question

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:

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?

#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%;
}

<div id="container">  
  <div id="wrapper">
    <div id="parent">
      <div id="child">
      This is my overlapping Text
      </div>
    </div>
  </div>
</div>

Answer 1

I have added z-index to position the text-box in front of image box.Check my code.

#container{ width:100%;position:relative; }
    
	#wrapper{ width:100%;border:1px solid black;position:relative;overflow:auto;height:400px; }
	
	#text_box{ position:absolute;border:1px solid red;width:50%;height:250px;top:10px;right:10px;z-index:1;background-color:red; }
	
	#image_box{ position:absolute;border:1px solid blue; width:70%;height:300px;bottom:10px;left:10px;z-index:0;background-color:blue; }

  <div id="container">
    <div id="wrapper">
      <p>Wrapper</p>	
      <div id="text_box">
	    <p>Text Box</p>
      </div>
	  <div id="image_box">
	   <p>Image Box</p>
      </div>
	</div>
  </div>

Answer 2

I'm not sure this is exactly what you're going for, but if you add padding to the top of the wrapper, you can offset the child element.

#wrapper {
  background-color: green;
  padding-top: 50px;
}

#parent {
  width: 500px;
  height: 400px;
  border: 4px solid blue;
  background-size: cover;
}

#child {
  width: 300px;
  height: 200px;
  border: 3px solid red;
  position: relative;
  top: -50px;
  left: 80%;
}

<div id="container">
  <div id="wrapper">
    <div id="parent">
      <div id="child">
        This is my overlapping Text
      </div>
    </div>
  </div>
</div>

Here's the fiddle: https://jsfiddle.net/16f8mj39/