IE 7 Z-Index and IE6 Fixed Positioning - css

Question

I have a vertical scrolling website - It works fine in IE7 aside from a few margin issues and problems rendering some .PNGS - but I have one big problem;
I'm using two fixed positioned menus - one that slides out at an anchor point and one that just sticks to the bottom. Essentially - ones always at the top with the scroll and ones always at the bottom.
They stick, and work fine - problem is, I'm using z-index in the CSS and it seems IE7 is having some problems with it - with IE7 the sticky menus go behind the content. I read a suggestion trying to position it to 'relative'. But that would destroy the fixed.
Any suggestions? Thanks for anything -
Sub Question - of less importance, as I'm no longer carrying IE6 - but, is there a way to continue using these menus for IE6 - a way to work around it not reading position: fixed?
Here's an image to illustrate the problem better. http://tinypic.com/r/20fqqkp/7

Answer 1

Without any code it's tough to know for certain, but most likely the issue you are seeing is the z-index bug in IE.
Any element in IE6 or IE7 with position: relative set will generate a new stacking context. This means that the z-index of their elements not in the same stacking context won't necessarily stack as you'd expect.
For example, consider this HTML:
<div id="parent-1">
<div id="child-1"></div>
</div>
<div id="parent-2">
<div id="child-2"></div>
</div>
And this CSS:
/* Both parents create their own stacking context */
#parent-1, #parent-2 {
position: relative;
}
#child-1, #child-2 {
position: fixed;
}
/* Should be lower */
#child-1 {
z-index: 10;
}
/* Should be higher */
#child-2 {
z-index: 20;
}
According to the spec, #child-2 should always be stacked higher than #child-1 (and this is what you'll see in sane browsers). But since both parents have position: relative set, IE6-7 will have created 2 stacking contexts and might not do this for you.
The fix is to apply z-index to the elements creating the stacking contexts or to make sure all elements are in the same stacking context.
As for your IE6 problem, yes, you can emulate it with CSS expressions. Use the following in an IE6 only stylesheet:
/* Fixed to the top */
#top-fixed {
position: absolute;
top: expression(document.documentElement.scrollTop);
}
/* Fixed to the bottom */
#bottom-fixed {
position:absolute;
top:expression(
document.documentElement.scrollTop +
document.documentElement.clientHeight -
this.clientHeight
);
}

Answer 2

Try the zindex fix http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/