CSS Floating Pop Up: Tricky CSS Positioning

Question

I have a website that, upon clicking a link generates a div.

Allow me to explain a little deeper. I have a table of "pages" in my CMS and I've added the ability to add new pages through a little popup div.

My pop-up div is defined below the table, but is style="display:none" so it does not appear on the page. Upon clicking the Add New Page button, my javascript function fires a:

document.getElementById("addPage").style.display="block";

This allows the div to magically appear upon calling.

However, here's my problem; I wish this div to appear central always but my standard margin:auto isn't allowing this to centre the div, as it still appears below the table (although right/left centred and z-index:999).

Here is my CSS code:

#addPage{
 width:250px; 
 height:180px;
 background-color:#FFFFFF;
 border:1px #000000 solid;
 position:absolute;
 z-index:999;
 padding:10px;
}

Answer 1

Description is unclear and could do with screenies/diagrams, so I'll go stream of consciousness here:

• z-index has nothing to do with positioning, just layering, so ignore that for the moment
• position:absolute or more likely position:fixed are definitely what you need to achieve position relative to the document/screen, not to another element.
• It sounds like you are talking about vertical centering, not horizontal, yes? This is considerably more difficult to achieve with a pure CSS solution.
• Since your given style correctly specifies pos:abs and a height, if it's applying and not conflicted I see no reason why your div wouldn't be exactly where described.
• However, you are also manipulating styles with JS directly which is an anti-pattern as far as I'm concerned because it applies at a higher specificity and in a much more obfuscated and harder to reverse way. You should triple check what you're doing to the element and if at all possible refactor so as to apply style tyhrough modifying class alone.
• What does firebug indicate the applied styles are?
• Why aren't you just using a standard lightbox/messagebox solution? General rule of thumb in web dev is that anything you want to do has already been done and standardised before, so you need to have a good reason to be reinventing the wheel.

Answer 2

Since you want vertically and horizontally centered, you can use the dead centre technique. It uses absolute positioning to put an element of known width/height in the centre of the screen.

If your overlay's dimensions are dynamic, all you'll have to do is run a bit of javascript to determine its width/height before displaying it.