我是青少年

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.

这是每个图像位于其中的位置

现在我喜欢

我是青少年

中的文字并且

我是父母/照顾者

图一显示了页面如何显示为1000像素，所有内容都响应了，只是没有文本，因为我无法使用flexbox，grid，relative和absolute和z-index或Bootstrap正确组合。 https://ibb.co/RQYcJ8m

图片二是移动尺寸。同样，背景图像和蓝色形状具有响应性，但是如果不使用相对字体，文本将不会位于蓝色形状上。 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>

Answer 2

Flexbox应该可以解决问题：

.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
  color: black;
}

html, body, .container{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    background: orangered;
    min-height: 350px;
}

.circle{
    background-color: dodgerblue;
    opacity: 0.8;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.circle:first-child{
    margin-right: 40px;
}

如何将文本叠加到容器内的Flexbox图像上并使之响应

我是青少年

我是父母/照顾者

2 个答案: