Skip navigation
Currently Being Moderated

image overlay problem ,want to fix it

Apr 6, 2013 10:37 AM

   <?php get_header(); ?>


<div onclick="myFunction()" id = "xx1" style="position: absolute; width: 209px; height: 607px; z-index:400" >

<img src = ""></img></div>


    function myFunction()


    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 :


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 :


code edited : cracker007

  • Currently Being Moderated
    Apr 7, 2013 5:35 AM   in reply to 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?

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points