наложение между 2 div

Question

как наложить div между 2 div?

вот что у меня есть rn

вот мой код

<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

Вы можете использовать отрицательные поля:

.middle {
  margin: -8px auto;
  background: white;
  display: inline-block;
  width: 50%;
  height: 100px;
  border: 2px solid DeepSkyBlue;
  border-radius: 10px;
  box-shadow: 0 3px 1px LightGray;
  z-index: 1;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  height: 100vh;
}
.top {
  background: DimGray;
  height: 50px;
}
.bottom {
  background: WhiteSmoke;
  flex-grow: 1;
}

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Answer 2

Поместите оверлей 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 опубликовал действительные ссылки на изображения и отредактировалдолжность)