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

Posted 2023-03-05

【中文标题】如何在我的文本上应用 z-index 以将其浮动在我的图像上

【英文标题】：How do I apply z-index on my text to float it over my image

【发布时间】：2019-08-13 09:19:57

【问题描述】：

我正在尝试将文本浮动到图像上，但似乎无法让文本位于图像顶部。

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

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

谢谢！

【问题讨论】：

z-index 不会生效，除非元素的位置设置不是 static。

【参考方案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>

【讨论】：

太棒了，看来我的问题出在 .row 部分，我什至不需要 z-index，感谢您的帮助！

太好了，我建议对您的问题进行一些更改，希望能阻止反对票。