Html 如何在文本上应用z索引以使其浮动在图像上

我试图在图像上浮动文本，但似乎无法使文本位于图像顶部

如果我在一个div中有一个图像和一个文本块，那么需要什么样的CSS才能使文本按我的计划工作

以下是我没有css的代码：

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

文本
正文

如果你能垂直对齐文本区域，那将是一个巨大的帮助

---

谢谢

如果我这样做，我会用两种方法之一

可以使用图像声明元素的高度，然后将文本区域放置在顶部，如下所示：

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

* {
保证金：0；
填充：0；
框大小：边框框；
}
.行{
宽度：100%；
保证金：0自动；
位置：相对位置；
}
.文本区{
宽度：自动；
高度：自动；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：1；
文本对齐：居中；
}
.bg图像{
宽度：100%；
高度：自动；
保证金：0自动；
位置：相对位置；
显示：块；
}
文本
正文

或者设置框的高度并使用如下背景图像：

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: relative;

    background-image: url(https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>
</div>

* {
保证金：0；
填充：0；
框大小：边框框；
}
.行{
宽度：100%；
高度：100vh；
保证金：0自动；
位置：相对位置；
背景图片：url(https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg);
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.文本区{
宽度：自动；
高度：自动；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：1；
文本对齐：居中；
}
.bg图像{
宽度：100%；
高度：自动；
保证金：0自动；
位置：相对位置；
显示：块；
}
文本
正文

z-index

将不会生效，除非元素的位置设置不是

static

。太棒了，似乎我的问题是。行部分，我甚至不需要z-index，谢谢你的帮助！太好了，我建议对你的问题做一些修改，希望能阻止反对票。