html - 2 个 div 之间重叠

Question

如何在两个div之间叠加一个div？

这就是我所拥有的

这是我的代码

<Jumbotron style={{position: 'relative'}}>
//
</Jumbotron>
<section id="foo1">
<Container style={{position: 'absolute', zIndex: 1}}>
//
</Container  
</section>
<section id="foo2">
<div style={{position: relative}}>
//
</div>
</section>

这是我期望的结果

Answer 1

将覆盖 div 放入另一个 div 内，并设置 position:absolute

这是你想要的吗？尝试demo

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

CSS

.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;
}

(我在 OP 发布有效图像链接并编辑帖子之前编写了此代码)