Div Z-index issue IE & FF

[optik]

I'm using this style to layer a div over another one but it just pushes the div it's meant to cover down the page in IE and FF.

.hide{
background-color:#FFFFFF;

z-index:10000;
position:relative;
height:870px;

filter: alpha(opacity=79);
opacity: 0.79;
}

<div class="hide" >
TOP
</div>
<div>
should be hidden!
</div>

[Major_Payne]

Why not just use the CSS property: visibility: hidden; ?

[rainborick]

You'll have to use absolute position to get one DIV to appear over another DIV. The document flow isn't affected by z-index, and you need to take the overlay DIV out of that flow to give it the same position as the underlying DIV. For best results, enclose both DIVs in a containing DIV with it's position defined both vertically (top or bottom) and horizontally (left or right), and then use position:absolute on the two DIVs in question. Good luck!

[optik]

I need this working in a site that is centred to the bowser window though, I can get absolute to work but not when its in a div centrally floating in the browser window.

[rainborick]

You can still use position:absolute. Just make sure that the parent containing element's position is defined, even if it's "position:relative; top:0; left:0;", as in:

<div style="position:relative; top:0; left:0; z-index:1; width:xx; height:yy;">
<div style="position:absolute; top:0; left:0; z-index:1;">
 Some content
</div>
<div style="position:absolute; top:0; left:0; z-index:2;">
 Overlay content
</div>
</div>

You need to set width and height on the parent element because the DIVs with position:absolute have been taken out of the normal document flow and so the space they require for display isn't automatically accounted for by the browser.

[optik]

thanks rainborick that works perfectly.