<div onclick="myFunction()" id = "xx1" style="position: absolute; width: 209px; height: 607px; z-index:400" ><img src = "http://i.imgur.com/YqqQj2x.png"></img></div>
<?php get_header(); ?>

<script>
function myFunction()
{
    element = document.getElementById("xx1"); //the div element
    img = element.firstChild; //the img element
    element.removeChild(img); // you can use too: img.parentNode.removeChild(img); because the div is the parent of the img :o


}
</script>

I used above code to get image overlay feature over my blog post and on clicking the overlay image it must be removed.
my webpage : http://netstrikers.comeze.com/?p=69

I have a problem that the overlay image is not in position , it has some problem in alignment ,(During zoom out the web page , overlay image changes its position)

 I want the overlay image exactly within the blog post container. can anyone help me to modify the code ,I'm not expert in coding.