Clever Geek Handbook

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


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


source






More articles:


All Articles