1 Reply Latest reply: Apr 7, 2013 5:35 AM by MurraySummers RSS

    image overlay problem ,want to fix it


         <?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>


          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 : 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

        • 1. Re: image overlay problem ,want to fix it
          MurraySummers ACP/MVPs

          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?