如何使用 flexbox 使一个 flex 项与另一个 flex 项重叠？ [复制]

Question

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

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

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

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

Answer 1

我认为这与flexbox 无关。这听起来像是positioning 类型的问题。

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>