Html 覆盖在2个div之间

如何在两个div之间覆盖一个div

这是我得到的

这是我的密码

//
//
将覆盖层
div
放入另一个
div
中，并设置
位置：绝对

这是你想要的吗？试试

（我在OP发布有效图像链接和编辑帖子之前编写了此代码）
您可以使用负边距：


.middle{
保证金：-8px自动；
背景：白色；
显示：内联块；
宽度：50%；
高度：100px；
边框：2件纯色深蓝；
边界半径：10px；
盒影：0 3px 1px浅灰色；
z指数：1；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：拉伸；
对齐项目：拉伸；
高度：100vh；
}
.顶{
背景：灰色；
高度：50px；
}
.底部{
背景：白烟；
柔性生长：1；
}

如何使其响应？有可能吗？是的，使用
媒体查询
<div class="test">

  <div class="div1">
   I'm div 1
  </div>

  <div class="div2">
   <div class="div-overlay">
    overlay div
   </div>
   I', div 2
  </div>

</div>

.test{
  border: 1px solid black;
}

.div1{
  position: relative;
  display: "inline";
  background: yellow;
  height: 50px;
}

.div2{
  position: relative;
  display: "inline";
  background: purple;
  height: 50px;
}

.div-overlay{
  position: absolute;
  left: 100px;
  top: -25px;
  display: "inline";
  background: red;
  height: 50px;
  width: 100px;
}