How to place DIV on top of all and on the middle of page?

Question

I have a page with a form and a div:

<body>
    <form id="form1" runat="server">
        ...
    </form>
    <div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none">
        <div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;">                
           ...
        </div>
    </div>
</body>

On a button click, I make the div visible, and I want it to cover the whole page, while the inner div is right in the middle (in the center, both horizontally and vertically.) just like a popup modal.

To illustrate: enter image description here

The current html fails the following:

The div is not covering the whole page, it is located after the form, instead overlaying it.
The inner div is only horizontally centered and not vertically.

What am I missing here?

Is my approach is "browser-compatibility" safe? (Maybe I should look for a Jquery solution?)

Final Solution:

I ended up using:

Didier G answer for the overlay problem.
Jquery to center the div on screen
CSS3 for rounding the corners of the div

@Dandroid: I tried to add it to each div separately, and to both at once, it didn't helped. — MichaelS, Dec 14 '11 at 09:27
Did you also give `wizardDiv` a lower z-index than the div with `z-index:999`? — , Dec 14 '11 at 09:31
Please paste the full code to look at. You can remove all the text if its confidential... — Sid Malani, Dec 14 '11 at 09:47

Didier Ghys · Accepted Answer · 2011-12-14T09:51:54.673

Use a slightly different markup and css to position both your overlay and your popup.

Build a simple markup like this:

<form id="form1" runat="server">
    ...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>

Notice I haven't put the popup within the overlay. While there is no hurt to do this, if you want to style your overlay with css opacity, everything contained in it will also be semi-transparent.

Then use the following CSS:

#overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    z-index:998;
    background-color: Black;
    opacity: .5;
}

#popup {
    position: absolute;
    width:50%;
    background-color:#8DA5C6;
    z-index: 999;
}

Both elements must have position: absolute to go out of the page flow.
The overlay must cover the whole space. This is achieved with top, left, right, bottom, width, height
Using z-index, you can then make them stay on top of other things. A lower one for the overlay and a higher one for the popup

You can check this fiddle for a working example.

Note:

This does not center the popup. It requires a bit more work to do so and it's a bit more complex (has the popup a fixed size or not, should the popup stay centered while resizing the window...).

It would require a bit of javascript I guess.

You can't use margin: 0 auto; on absolute positionned elements.

G, adding position:absolute make it ugly when user scroll down the page, the div will follow the page not covering the whole page again. so you need to position:absolute this — Ariona Rian, Dec 14 '11 at 10:57

score 0 · Answer 2 · answered Dec 14 '11 at 09:45

0

You can actually do this with the help of Jquery.

<div class="overlay"></div>
<div id="form-container">
   <form>
       ...//codes here
   </form>
</div>

make sure the height of the overlay is the same as your page,width is 0 and position absolute. use jQuery to animate the overlay to cover the whole webpage when an event is triggered.

Hope this helps =D

answered Dec 14 '11 at 09:45

XepterX

1,017
6
16

2

I wonder how can jquery be necessary to style correctly two `
` with pure css... jQuery is not the solution to everything.
– Didier Ghys Dec 14 '11 at 09:56

score 0 · Answer 3 · answered Dec 14 '11 at 11:03

try this code

<body>
    <form id="form1" runat="server">
        ...
    </form>
    <div id="wizardDiv" style="position:fixed;top:0;left:0;width: 100%; height: 100%;background-color:black;display:none" z-index:998>
        <div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 20 auto;">                
           ...
        </div>
    </div>
</body>

i just modify your code, maybe it will readable if i write the css like this:

#wizarddiv{
  position:fixed; /* it make the overlay have fixed position even you scroll the page */
  top:0; /* let make the overlay pushed up, to the top of the screen. */
  left:0; /* you probably know what it this */
  z-index: 999; /* set to the higher value, also note that you don't need to set it too to the child element.
  background: rgba(0,0,0,.5);
}

How to place DIV on top of all and on the middle of page?

3 Answers3