Placing text on top of a image - html

Question

I've been looking on several threads on stackoverflow, but cant seem to make it work. What i've found out is that i need to apply relative position on the parent div and then absolute on the child text, but this is not working? what am i doing wrong`
.the-image {
position: relative;
border: 1px solid;
width: auto;
}
.the-h3 {
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
.the-h3 span {
color: #ffffff;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
<div class="the-image">
<img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
<h3 class="the-h3"><span>TEST</span></h3>
</div>

Answer 1

You are giving the h3 a top property which is more than the image is high.
Simply lower that value to something more fitting:
.the-image {
position: relative;
border: 1px solid;
width: auto;
}
.the-h3 {
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:10px;
}
.the-h3 span {
color: #ffffff;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
<div class="the-image">
<img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
<h3 class="the-h3"><span>TEST</span></h3>
</div>