How can I * overlap * divs that are centered inside the flexbox without using absolute positioning?
See this plunker. What's the most efficient way to do this with css flexbox without resorting to absolute positioning?
The current plunger code looks like this:
CSS
.container{
display: flex;
align-items: center;
justify-content: center;
border:4px dashed red;
height:600px;
width:80%;
}
.under{
background-color:yellow;
height:80% !important;
width:40% !important;
}
.over{
background-color:blue;
height:50%;
width:20%;
}
Html
<body>
<div class='container'>
<div class='under'> Under - this should be in the center of the container </div>
<div class='over'>
<h3>Center overlay the blue div on top of the green!</h3>
</div>
</div>
</body>
+3
Jarnal
source
to share
1 answer
for .above add margin-left: -100px; so that they overlap ... but I don't know why you need it ...
0
VincentGuo
source
to share