I have a flex container (the blue square) with the following properties:
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
Therefore, its children (the light blue squares) arrange themselves as you see below. However, I'd like to add another child (the green square) out of the normal flow and position it relative to its parent. To position it as you see below, I'd ideally write something like bottom: 20px; and margin: auto;.
I tried to play around with z-index to no avail. How should I approach this? Should I resort to creating another parent element?