Override absolute position on child container (modal window)

Question

I have a modal window that is pulled from the server and inserted into a container that is absolute positioned. When that window is triggered to open, it does not display properly, it positions itself inside the container and most of it is hidden.

Is there a specific css to be written for the container of the modal window (MyModalWindow). My code is as follows:

<div style="position:relative;">
   <div style="position: absolute;">
     <div id="MyModalWindow"> </div>
   </div>
</div>

This is a jquery tools window and attaches the following style to MyModalWindow when it shows.:

element.style  {
   display:block;
   left:183.5px
   position:absolute;
   top:468.4px;
   z-index:9999;
} 

I basically need the div to not be a child of the parent, since as jquery calculates it to be positioned at the center of the webpage no matter where the div is.

Answer 1

The CSS to select MyModalWindow would be:

  #MyModalWindow
    {
        position:relative;
        top:10px;
        left:10px;
    }

Where the # relates to ids and . relates to classes. The top and left properties will help you to position the div where you want it inside its parent.

And this HTML:

<div style="position:absolute;">
     <div id="MyModalWindow"> </div>
</div>

Answer 2

Try taking those inline positioning styles off and see if that fixes anything:

<div>
   <div>
     <div id="MyModalWindow"> </div>
   </div>
</div>

Also, you could probably just make the #MyModalWindow div sit outside of the page structure and add it to the end of your body by itself. Then the jquery tools plugin should do the rest, like this:

<div>
   <div>         
   </div>
</div>
<div id="MyModalWindow"> </div>