zIndex issue in IE

zIndex issues are a common problem in Internet Explorer. My question basically is, can the following be done in IE? I've been trying but IE kee开发者_运维百科ps putting the #middle div above or below...

---

Your biggest problem here is the container.

It can work if you don't put your container in an absolute position, or if you can put the ontop one outside the container

Example without absolute on the container

   <div id="container" style="width:300px; height:300px; background-color:#CCC;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;"></div>
    <div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>    
</div>
    <div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>

Example with ontop outside the container

<div id="container" style="width:300px; height:300px; background-color:#CCC; top:0; left:0;position:absolute;  z-index:1;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;">
    </div>
</div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>

---

The jsfiddle linked in the comments to the question already has the correct answer implemented for maintaining the current document tree structure: the container must be forced into the normal flow via 'position: static'. Otherwise IE assumes all contained positioned elements are based on context of the z-index of the container (and in turn their z-indexing only acts relative to the container and the container's children), essentially as if the container box is not in the normal flow, even if the container was not explicitly positioned.

Here is a jsfiddle of the question without position: static attached to the container.

Here is the jsfiddle with position: static attached, as linked in the comments.

The first breaks in IE7 mode in IE9 (works fine in chrome), the second works in IE7 mode in IE9 (and works in chrome).

If 'position: static' is not an option, you will have to move the div outside of the container so that it is at least sibling to the middle div, as demonstrated in the other answer.

It's non-intuitive because z-index context for IE is based on the degree that various elements are sibling to each other within context to their flow/the normal flow, not the document structure.