Text overlay on image not working

Question

I have an image with text I'm trying to overlay and it's pushing the text underneath the image as well as not displaying it. Not sure why this isn't working. Any help would be appreciated.

Here is my code:

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

Here is my 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

Seems you need a left, top, right and/or bottom declaration to the .product-hero-text class in order to put it in place.

.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

Set z-index: 1; in your absolute positioned element.