将div的一部分放在另一个

Question

我试图将div的一部分隐藏在另一个之下。 https://jsfiddle.net/71obhkzh/7/显示了我现在拥有的内容。

<div>
  some stuff here
</div>
<div id="container">
  <div id="top">

  </div>
  <div id="bottom">

  </div>
</div>
<div>
  some stuff here
</div>

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
}

#bottom {
  height:100px;
  width: 120px;
  background-color: blue;
  margin-top: -40px;
}

在小提琴中，我使用负边距顶部将蓝色div向上移动一点，但它覆盖了红色div的底部。我需要红色的那个像这样的https://awwapp.com/b/unzo2gs6g/

好吧，如果我按照建议添加z索引它可以在小提琴上工作，但在实际应用中，颜色像这里一样混合 http://i67.tinypic.com/34pets8.png 我正在使用bootstrap，现实有点复杂（顶部和底部div中的弹性框具有更多内容）。我尝试在顶部div上设置不透明度，但它没有帮助

真实代码（登录容器是红色的，信息是蓝色的）

 <div class="container">
    <div class="row justify-content-center login-container">
     <div class="col-6 login-box">login form here</div> 
     <div class="col-4 register-box">register box here</div>
    </div>
    <div class="d-flex justify-content-center info-container">
      <div id="advantages" class="d-flex flex-column justify-content-center align-items-center">
       some text
      </div>
      <div id="image" class="d-flex flex-column justify-content-center align-items-center">
        <img src="some image"/>
      </div>
    </div>
  </div>

https://jsfiddle.net/71obhkzh/31/

Answer 1

利用z-index。

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
  z-index: 2
}

#bottom {
  height:100px;
  width: 200px;
  background-color: blue;
  margin-top: -40px;
  z-index: 1
}

<div>
  some stuff here
</div>
<div id="container">
  <div id="top">
      
  </div>
  <div id="bottom">
  
  </div>
</div>
<div>
  some stuff here
</div>

Answer 2

使用z-index执行此操作：

＆＃13;

＆＃13;

#container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 300px;
}

#top {
  height:100px;
  width: 100px;
  background-color: red;
  z-index:2;
}

#bottom {
  height:100px;
  width: 120px;
  background-color: blue;
  margin-top: -40px;
  z-index:1;
}

＆＃13;

<div>
  some stuff here
</div>
<div id="container">
  <div id="top">
      
  </div>
  <div id="bottom">
  
  </div>
</div>
<div>
  some stuff here
</div>

＆＃13;

＆＃13;

＆＃13;