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

    image overlay problem ,want to fix it

    cracker007

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

          <script>

          function myFunction()

          {

          element = document.getElementById("xx1");

          img = element.firstChild;

          element.removeChild(img);

             }

            </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.

       

      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?