As far as I know z-index should work the same on statically positioned elements. Should being the operative word. The spec says it should work at least.

If you can offer more details or point me somewhere that talks about this more it would be appreciated.

Thanks again.

I had thought the code I used would cause the problem, but now I’m thinking you’re right and it’s the z-index: auto being treated as z-index: 1 in IE that causes the problem. Maybe I was thinking more about the fix, which would be to increase the z-index on the div to be more than the z-index on the image. Of course that assumes it would still work like you want in other browsers.

It definitely gets confusing. You can read through the specs and even test different code and sometimes you still have no idea why something is happening.

In the example snippet you provide, all browsers correctly place the image above the paragraph because the (with paragraph’s inside) and the image share the same stacking context. It’s as though there is a a parent enclosing all your code with any z-index value. The value doesn’t matter because this parent is setting the stacking context for ALL its descendants.

Okay, what we need then to demonstrate IE’s typically wayward behaviour is a real parent and let’s assume it is given a z-index of 69 (any old number will do).

If you leave the rest of your code snippet unchanged then all browsers will continue to place the image above the text.

But now remove the z-index from the div with the paragraph. This forces browsers to give that div the default value for z-index which is “auto”.

It is this that IE gets wrong. It treats auto as though it were a value of 1 and (crucially) also establishes a new stacking context. The div and the image now no longer share the same stacking context as far as IE is concerned. This leaves the image above the paragraph.

Standards compliant browsers will treat the auto attribute correctly meaning that it inherits the z-index of its parent and NO new stacking context is created. The result then is the text above the image.

Confusing isn’t it! And sometimes the act of trying to explain can confuse further. In case I have done that then try a simpler analysis to show IE’s mistreatment of “auto” and change the z-index value on your from zero to auto and check it out.