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 CommunityMVP

          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?