Positioning divs with z-Index in Internet Explorer 7

Question

<div style="position:relative;"> OUTERFOO <div style="position:absolute; z-index:1000;">FOO</div></div> <div style="position:relative;">OUTERBAR <div style="position:absolute;">BAR</div> </div>

I want FOO to stack over BAR without OUTERFOO stacking over OUTERBAR!

This works in Firefox, but not in IE7. Can someone post a workaround?

Thanks in advance, Stephan

Answer 1

There's a known z-index bug in version of IE prior to 8 where positioned elements generate a new stacking context causing z-index to function incorrectly. This example illustrates the problem.

Does your page appear correctly in IE8?

Answer 2

Not sure if I'm quite clear on what you want however taking your code and how it renders in Firefox 3 can be replicated in IE7 by rearranging your divs as followed

<div style="position:relative; z-index:2;">OUTERFOO</div>
<div style="position:absolute; z-index:1">
   <div style="position:absolute; z-index:1000;">FOO</div>
      OUTERBAR
      <div style="position: relative; z-index: 1;">BAR</div>
   </div>
</div>

Answer 3

The fact that W3C defines a standard without creating an implementation is what leads to different interpretations, regardless of which browser does it 'right or wrong'.

The proper way to do what you want in all browsers is something like:

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
  </div>
  <div style="position:absolute; z-index:2;">FOO</div>
</div>

or

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
    <div style="position:absolute; z-index:2;">FOO</div>
  </div>
</div>

No need for ziindexes with ridiculous numbers - that leads to confusion.

Basically, when you are using z-index, you should position all sibling elements and the parent element, and you should z-index all siblings for sake of clarity. This makes for far more headaches.

The way you were trying to do this in your question violates the basic rules of layering in the same way that this does, for example:

<div><span></div></span>

You are looking for a solution that uses css to break the nesting rules of html syntax. The examples I provide accomplish what you really want while obeying those rules.