Наложение текста на изображение не работает

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

Кажется, вам нужно левое, верхнее, правое и/или нижнее объявление в класс .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; 
} 

Answer 2

Установите z-index: 1; в вашем абсолютном позиционированном элементе.