Untitled

How to position text over an image in css
<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

<div id="container">
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
    <p id="text">
        Hello World!
    </p>
</div>

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}