Q:

place text over image whether it exists or not

I want to place the text over image if it exists in database or same location if it does not exist.
the Issue am facing is that if there is an image, the text goes beneath it and if it's not there, text goes on teh correct location as explained on the attached picture. 
code is below: 
<div class="category">
    <img src="home.php?cat={$mc.categoryid}"/>
    <div class="title">
       <h2>Some text</h2>
    </div>
</div>

I want to do something along the lines of:
<style>
.category{
   width: 400px;
   height: 400px
}

.title {
   position: relative;
   top: 3px;
   left: 0;
   width: 100%;
   height: 50px;
}
</style>

A:

Make sure both the image and the text have position:absolute and .category has position:relative, with the text's z-index higher than that of the image's.

