2 div 之间的叠加答案

【问题标题】：overlay between 2 div2 div 之间的叠加
【发布时间】：2020-03-06 07:27:03
【问题描述】：

如何在 2 个 div 之间叠加一个 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>

这是我期望的结果

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案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 发布有效图片链接并编辑帖子之前编写了此代码）

【讨论】：

我怎样才能让它响应？有可能吗？
是的，使用Media Query w3schools.com/css/css_rwd_mediaqueries.asp

【解决方案2】：

您可以使用负边距：

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

【讨论】：