Forum Moderators: not2easy
The block had no specified z-index.
The drop-down of the menu had z-index: 10000 (iow.: plenty to go over it any other browser)
In both IE6 and IE7 the drop down -surprise- did not go over the absolutely positioned block (no big surprise, legacy IE versions are simply weird when it comes to generating extra stacking contexts).
My first effort to fix it was to set the z-index on the absolute block to 0
Didn't work. So far I should have thought about the different stacking context and try to look there, but for some bizarre reason I remembered z-index could also be negative, so I dropped it to -10000 on the absolute block:
bingo the drop down went over it.
Curious as the why it worked for -10000 but not 0, I experimented a little and found that z-index:-1 is enough to drop it in the proper order, but z-index:0 isn't.
Hope it might help somebody else: if z-index:0 doesn't push things far enough back in legacy IE versions, maybe z-index:-1 does.
Just a word of caution -- make sure the negative z-index is only sent to IE, as other browsers might actually hide the content underneath the body (z-index: 0).
Also, it's been my experience that non-zero z-index works well, too. I believe z-index 1 and 2 respectively should work.
Curious as the why it worked for -10000 but not 0, I experimented a little and found that z-index:-1 is enough to drop it in the proper order, but z-index:0 isn't.z-index is problematic in ie because of the (incorrect) way elements (incorrectly) generate a new (incorrect) stacking order. In this case ie is badly wrong (per the recs) and the justification (if I recall correctly) about handling windowless objects seemed to me to be so dubious I never bothered to remember it.
The incorrect implementation means the absolute block has not been drawn by reference to the z-index of the drop down, but according to a new order. That makes it pointless to compare z-index's and assume that the higher z-index of the drop down will result in it being drawn higher than anything else. What is required is to consider the z-index of the element that is behaving badly (in this case the absolute block) and move it below its default position in the stack.
Setting z-index:0 did not work because the default z-index for the absolute block is z-index:auto which (in this case) translated to the same place in the stack as z-index:0. That means setting z-index:0 on the absolute block did nothing more than explicitly set the implied default. As the implied/default position of z-index:0 was already drawing the absolute block above the drop down, explicitly setting the default z-index:0 predictably did not achieve what was desired.
The fix is to set a z-index that will move the absolute block below its default place in the stack. In this case that was achieved using z-index:-1, which stacked the block lower than the default z-index:0.
Per the by-line0 is not less than 10000 because the incorrect implementation means they are not really being compared. If they were, it would be more like 0=10000. However, as it is unhelpful to compare the z-index's of different elements, I find it best to focus on the z-index of the element that is not behaving as desired. Taking that approach -1 is less than 0. Easy and more logical.
Where -1 is less than 10000 but 0 is not less than 10000
@DrDocDefinitely needs testing, but rocknbil's response to a poster last year prompted me to do some tests and was surprised to discover this wasn't always the case.
Just a word of caution -- make sure the negative z-index is only sent to IE, as other browsers might actually hide the content underneath the body (z-index: 0).
css-discuss began looking at this around 2005, quirksmode did an article in 2007(?) and stu nicholls has produced some interesting solutions over the years. I didn't explore in detail until producing solutions for cross browser css hovers for posters here. Conceptually z-index is simple, so should be simple to implement, but I discovered a myriad of quirks - Opera was particularly bad, including version variations. I couldn't find a comprehensive treatment anywhere, and had to cobble together solutions to individual issues as they arose - any chance suzyUk (who's done some work in earlier posts), or DrDoc could scribe up something for the library?
[edit]For clarification[/edit]
