position part of the div underneath another - html

Question

I'm trying to hide part of the div underneath another.
https://jsfiddle.net/71obhkzh/7/ shows what I have now.
<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;
}
In the fiddle I used the negative margin-top to move the blue div up a bit, but it covers the bottom of the red div. I need the red one to be on top of blue one like this https://awwapp.com/b/unzo2gs6g/
Ok, if I add the z index as suggested it works on the fiddle, but in real app the colors are mixed like here
http://i67.tinypic.com/34pets8.png
I'm using bootstrap and the reality is bit more complicated (flex boxes in the top and bottom div with more content). I tried to set opacity on the top div but it did not help
real code (login container is the red one, info the blue one)
<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

Make use of 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

Use z-index to do that:
#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;
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>