html - 如何将文本叠加到容器内的 flexbox 图像上并使其响应

Question

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

        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.

这是每张图片所在的位置

目前我很喜欢

我是青少年

中的文字 和

我是 parent /照顾者

图片一显示了页面在 1000 像素下的外观如何，所有内容都是响应式的，只是文本不是，因为我无法使用 flexbox、网格、相对和绝对以及 z-index 或 Bootstrap 获得正确的组合。 https://ibb.co/RQYcJ8m

图二是手机尺寸。背景图像和蓝色形状再次响应，但文本不会在不使用 relative 的情况下位于蓝色形状上。 https://ibb.co/0Gr59sM

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

还应用了没有填充或边距的 Bootstrap 4 容器流体。

这几天我一直在努力解决这个问题!

Answer 1

您希望您的亲子关系是:

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a parent/carer</h2>
</div>

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a teenager</h2>
</div>

其中每个 .hero__subtitle有position: absolute每个 .blue-circle有position: relative .

然后您可以使用 Flexbox 垂直和水平对齐每个 .hero__subtitle .您还需要删除 <h2> 上的边距和填充如果您还没有这样做的话。

---

.hero {
    /* space-around is used to provide equal spacing between and around
       the circles. align-items is used to center the circles vertically. */
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 500px;
    background: url(https://unsplash.it/1000);
}


/* The position is set to relative in order to keep the absolute
   positioning of the h2 in relation to the circle.
   
   I used Flexbox again to ensure the hero subtitles are vertically
   and horizontally aligned. */
.blue-circle {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: lightblue;
    opacity: 0.5;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}

/* The subtitle has a position of absolute in relation to the blue circle. 
   Margin and padding are removed to prevent any misalignments. */
.hero__subtitle {
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}

<div class="hero">
    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a parent/giver</h2>
    </div>

    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a teenager</div>
    </div>
</div>