Skip navigation
cracker007
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 = "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

 
Replies
  • 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