如何在我的文本上应用 z-index 以使其浮动在我的图像上

Question

我试图让文本浮动在图像上，但似乎无法让文本位于图像之上。

如果我在 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>

如果您也可以垂直对齐文本区域，那将是一个巨大的帮助。

谢谢！

Answer 1

如果我这样做，我会选择两种方式之一。

您可以使用图像来声明元素的高度，然后像这样将文本区域放在顶部：

<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>

或者设置框的高度并使用这样的背景图片：

<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>

如何在我的文本上应用 z-index 以使其浮动在我的图像上

How do I apply z-index on my text to float it over my image

html

css

vertical-alignment