2 div 之间的叠加

Posted 2023-03-05

【中文标题】2 div 之间的叠加

【英文标题】：overlay between 2 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>

这是我期望的结果

【参考方案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>