How can I use flexbox to make it so one flex item overlaps another flex item?

Question

I want to display a list of user profile images. Each profile image should be clickable and each user image should also be overlaid with the users name. In other words, the users name should be on top of their image.

I want to make <a> a flex container. When I do this, the vertical alignment is correct, but I need to manually control the horizontal alignment to make it so the text overlays the image.

<a>
    <img src="someurl">
    <span>some name</span>
</a>

possible duplicate: [**Center text over an image in flexbox**](http://stackoverflow.com/q/35871294/3597276) — Michael Benjamin, Feb 13 '17 at 18:07

score 4 · Answer 1 · edited Feb 13 '17 at 15:45

4

I don't think this has anything to do with flexbox. This sounds like a positioning type of question.

a{
  position: relative;
  display:block;
  width:200px;
  height: 200px;
}

a span{
  position: absolute;
  bottom: 0;
}

<a>
    <img src="http://placehold.it/200x200">
    <span>some name</span>
</a>

edited Feb 13 '17 at 15:45

Asons

84,923
12
110
165

answered Feb 13 '17 at 15:26

Serg Chernata

12,280
6
32
50

How can I use flexbox to make it so one flex item overlaps another flex item?

1 Answers1