Forum Moderators: not2easy

Message Too Old, No Replies

Div Z-index issue IE & FF

         

optik

5:01 pm on Sep 23, 2010 (gmt 0)

10+ Year Member



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

5:22 pm on Sep 23, 2010 (gmt 0)



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

rainborick

7:07 pm on Sep 23, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

11:05 pm on Sep 23, 2010 (gmt 0)

10+ Year Member



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

11:47 pm on Sep 23, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

11:48 am on Sep 24, 2010 (gmt 0)

10+ Year Member



thanks rainborick that works perfectly.