html - 我怎样才能使用 flexbox 使一个 flex 元素与另一个 flex 元素重叠？

<分区>

我想显示用户个人资料图片列表。每个个人资料图像都应该是可点击的，每个用户图像也应该覆盖用户名。换句话说，用户名应该在他们的图像之上。

我想制作 <a> flex 容器。当我这样做时，垂直对齐是正确的，但我需要手动控制水平对齐以使文本覆盖图像。

如何使用 flexbox 使一个 flex 元素与另一个 flex 元素重叠？

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

最佳答案

我不认为这与 flexbox 有任何关系。这听起来像是一个定位类型的问题。

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>

关于html - 我怎样才能使用 flexbox 使一个 flex 元素与另一个 flex 元素重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42207480/