图像上的文字覆盖不起作用

Question

我有一个带有文字的图像我试图叠加，它正在推动图像下面的文本以及不显示它。不知道为什么这不起作用。任何帮助，将不胜感激。

这是我的代码：

<div class="product-hero-container">
<div class="product-hero">
<img src="./images/image.jpg" alt="Title">
<div class="product-hero-text">
<h1>Title</h1>
<h2>Sub title</h2>
<p>Description</p>
</div>
</div>
</div>

这是我的css：

.product-hero-container {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background: #fff;
}

.product-hero-container img {
display: block;
}

.product-hero {
position: relative;
width: 100%;
height: 100%;
}

.product-hero-text {
position: absolute;
overflow: hidden;
padding: 12px;
font-family:'Roboto', arial, sans-serif;
color:#FFF;
}

Answer 1

在绝对定位元素中设置z-index: 1;。

Answer 2

似乎您需要对.product-hero-text类进行左，上，右和/或下的声明才能将其放置到位。

.product-hero-text {
position: absolute;
overflow: hidden;
left: 0; /* for example */
top: 0; /* for example */
padding: 12px;
font-family:'Roboto', arial, sans-serif;
color:#FFF;
}