HTML重叠的div元素

Question

我正在建立一个包含一系列胶版纸的网站，一个带有图像，一个带有文本，我想为每行交替设置偏移量。唯一的问题是，我无法弄清楚如何（同时将两个包装纸都放在包装纸中）使图像的高度小于包装纸的高度，以便文本卡可以位于顶部并与顶部和侧面重叠，如下所示：

很抱歉，图像布局应该是横向的。无论如何，按照我现在的方式，父母和孩子都在包装的顶部。我希望它使文本（子级）在顶部，图像稍短一些，以便从顶部和右侧的文本框中获得重叠/叠加效果。为了响应，我还需要确保它们留在包装中。我该如何解决？

#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

我不确定这是否正是您要的内容，但是如果将padding添加到包装的顶部，则可以偏移child元素。

#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>

这是小提琴： https://jsfiddle.net/16f8mj39/

Answer 2

我添加了z-index以将文本框放置在图像框的前面。检查我的代码。

#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>