I have been trying to figure out how to get the red box to display in front of the other flex items, but none of my attempts seem to work.
.box {
font-size: 2.5rem;
width: 100px;
line-height: 100px;
text-align: center;
}
.front .box {
margin: 20px auto;
}
.back {
display: flex;
justify-content: center;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px 0;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.red {
background: red;
}<div class="back">
<div class="box yellow">
<div class="box red" style="position:block; margin-left: 50px; z-index: 99999">2</div></div>
<div class="box green">2</div>
</div>