背景图像位置：相对重叠标题

Question

我刚刚开始学习一些基本的 CSS 和 HTML，并且对背景图像有疑问。我在图像上有一些居中的文本，我读到我可以使用位置属性来定位它，这是有效的。唯一的问题是，由于位置：相对，图像位于我的标题前面。

HTML：

<article class=container-image>
    <?php $imageUrl = ($image = $data->image())? $image->url() : 'waldvonoben.jpg'; ?>
        <div class=background-image style="background-image: url(<?= $imageUrl ?>);">
    <div class=image-text>
        <?= $data->inhalt()->toBlocks(); ?>
    </div>
</article>

CSS：

.container-image {
    position: relative;
}

.background-image {
    height: 100%;
    max-width: 100%;
    background-size: cover;
    display: block;
}

.image-text {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
}

我也尝试过将背景的 z-index 设置得较低，但这没有任何作用。我非常感谢所有帮助，提前致谢:)

Answer 1

当您在

position: relative

元素上设置

.container-image

时，它会建立一个新的堆叠内容。这使得子元素上的

z-index

不会影响该容器之外的元素。

要解决此问题，您可以在

z-index

元素上设置更高的

.image-text

，如下所示：

.container-image {
    position: relative;
}

.background-image {
    height: 100%;
    max-width: 100%;
    background-size: cover;
    display: block;
}

.image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Set a higher z-index */
}