Question

I m trying to add an item to the DOM using jquery. I want it to overlay on top(z-index) of all other content (there are hundreds of z-indices set already) and it should be center aligned at all times.

While adding this div to the DOM, i m setting its ‘left’ property to $(window).width()/2 – 971/2. 971 is the width of the div I m trying to add. This is the CSS for it

width: 971px;
height: 669px;
background-image: url(/path/to/image/);
position: absolute;
margin: 0px auto;
z-index: 2500; 

The problem is, the div does not stay centered after the browser is resized. I ve even tried with left: 50% and some negative left margin in pixels. If I set the ‘left’ property in relation with the ‘screen’ then it s centered only if the browser window is maximized by the user.

What is a good way to position this absolutely positioned div with a high z-index such that its always centered?

Answer 1

#someId{
    width: 971px;
    height: 669px;
    padding: 0;
    border: 0;

    margin-left:-486px; /* 971/2 */
    margin-top:-335px; /* 669/2 */

    position: fixed;
    left: 50%;
    top: 50%;

    background-image: url(/path/to/image/);
    z-index: 2500;
}

I know you’ve said you tried this – but this has always worked for me in any browser running in standards compliant mode (even ie) it might have been thrown off by not taking border or padding into consideration. Here’s a working example: http://jsfiddle.net/U3RrT/

I’ve just realised that it may be because you have set an element above it with a different position property; try position:fixed;.