Html 如何将文本覆盖到容器内的flexbox图像上并使其响应

下面的图像链接是我的页面外观示例

        I have managed to align each image which are housed in 
            <div class="parent">
              <div class="teenager">

        I can't get the text(s) to sit on top each blue shape. 

        I tried using using z-index, setting each image box as relative and tried setting the text both as absolute and using z-index. But then it will stay static when the resolution is changed.

我已成功对齐了存储在
我无法让文本位于每个蓝色形状的顶部。
我尝试使用z-index，将每个图像框设置为相对，并尝试将文本设置为绝对和使用z-index。但是，当分辨率改变时，它将保持静态。

这是每个图像所在的位置

现在我已经喜欢上了《我是一个十几岁的孩子》中的文本 我是一名家长/看护人

图1显示了页面在1000px时的外观，所有内容都是响应性的，而不是文本，因为我无法使用flexbox、grid、relative和absolute与z-index或Bootstrap正确组合

图二是手机尺寸。同样，背景图像和蓝色形状是响应性的，但是如果不使用相对的，文本将无法坐在蓝色形状上

我希望文本显示在蓝色形状的前面，而不是固定在适当的位置，以便它可以响应

此外，还应用了Bootstrap 4容器流体，没有填充或边距

---

我已经想了好几天了

您希望您的亲子关系是：

我是父母/看护人
我是一个青少年

其中每个

.hero\uu副标题

都有

位置：绝对

，每个

蓝色圆圈

都有

位置：相对

然后，您可以使用Flexbox垂直和水平对齐每个

.hero\uu副标题

。如果您还没有这样做，您还需要删除

上的边距和填充

---

.hero{
/*“周围空间”用于在和周围提供相等的间距
圆圈。对齐项目用于使圆圈垂直居中*/
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
宽度：100%；
高度：500px；
背景：url(https://unsplash.it/1000);
}
/*该位置设置为相对，以保持绝对位置
h2相对于圆的定位。
我再次使用Flexbox来确保英雄字幕是垂直的
并水平对齐*/
蓝圈先生{
位置：相对位置；
z指数：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：浅蓝色；
不透明度：0.5；
宽度：250px；
高度：250px；
边界半径：100%；
}
/*字幕相对于蓝色圆圈具有绝对位置。
去除边缘和衬垫，以防止任何错位*/
.英雄字幕{
保证金：0；
填充：0；
位置：绝对位置；
z指数：1；
}

我是一个父母/给予者
我是一个青少年

Flexbox应该做到以下几点：

html，主体，.container{
身高：100%；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：橙色；
最小高度：350px；
}
.圆圈{
背景色：淡蓝色；
不透明度：0.8；
边界半径：50%；
高度：200px；
宽度：200px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
.圈：第一个孩子{
右边距：40px；
}

我是一名家长/照顾者
我是一个青少年

code HERE在codepen.io上查看您的代码没有显示任何内容是的，这只是代码的一个示例。我的朋友似乎做到了这一点。我可以看出，我所使用的方法并不完全正确。非常感谢。没问题！我改变了我的解决方案。我将使用

，而不是

，以避免过度专一性。这可能对你今后有所帮助。