<?php get_header(); ?>
<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>
element = document.getElementById("xx1");
img = element.firstChild;
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.
my single.php file : http://pastebin.com/raw.php?i=8ReWyLxu
code edited : cracker007
To maintain position with respect to the rest of the page elements, the nearest ancestor container of any absolutely positioned element must be positioned relatively, for example -
<div id="ancestor" style="position:relative;">
<div id="xx1" style="position:absolute;">
With this code arrangement, as div#ancestor shifts in the normal flow of the code rendering, the div#xx1 will shift by a corresponding amount.
Does that help?