How to precisely position divs in a flex item - css

Question

I’m using flexboxes to spread 3 boxes across a row. They’re all in ul and li . I’ve put images in the li and it all spreads nicely, as advertised.
The problem arise when I position a few absolute boxes in my flex items, with text in them. These absolute divs are taken out of the flex items and positionned to the beginning of the row.
One workaround I found is to use relative divs instead of an absolute one, put it below my image and the use its top property, to move it on top of my image, but that leaves an empty white row below the image.
So I’m wondering what’s the “official” way of precisely positionning elements inside a flex item ?

Answer 1

Without code and even a graphic to illustrate the desired result this answer is a bit of a shot in the dark.
The primary assumption I'm going to make is that you want to overlay text on top of an image. The fact that you're using flexbox shouldn't be an issue if this assumption is true.
Typically when you want to overlay text on top of an image you absolute position it and and to prevent that absolute positioning from rendering outside of the parent element you set the parent element to position: relative;.
Notes:
Sometimes you might need to create a containing element just for the image and text overlay if there's other content associated with the image and text.
You might also have to set the element containing the image to inline so the parent containing element matches the size of the image.
Here's my suggestion:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</li>
<li>
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</li>
</ul>
And here's an example if there's additional content associated with the image and text overlay.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul {
display: flex;
justify-content: space-around;
}
li .intro {
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=1">
<div class="overlay">
Text Overlay 1
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=2">
<div class="overlay">
Text Overlay 2
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
<li>
<div class="intro">
<img src="http://placehold.it/100x100/ffcc00/?text=3">
<div class="overlay">
Text Overlay 3
</div>
</div>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
<p>
Some content here. Some content here. Some content here. Some content here.
</p>
</li>
</ul>