IE z-index bug

Z-index bug on IE is a well-known flaw that most of front-end web developers have heard about. It is documented pretty clear on PPK Quirksmode:

http://www.quirksmode.org/…/Explorer_z_index_bug.html

and here

http://therealcrisp.xs4all.nl/../IE-zindexbug.html

Basically here is the break-down of the workaround…

We have two div elements box1, nested in box3 and box2.

<div class="canvas">

		<div class="box" id="box3">
			<div class="box" id="box1">
				Box 1
			</div>
		</div>

		<div class="box" id="box2">
			Box 2
		</div>

	</div>

And we want box1 to be on top of box2 by setting z-index as the following :

.canvas {
 position: relative;
}

.box {
 width: 50px;
 height: 50px;
 position: absolute;
}

#box1 {
 top: 20px;
 left: 20px;
 background: green;
 z-index: 4000;
}

#box2 {
 top: 50px;
 left: 50px;
 background: yellow;
 z-index: 3000;
}

The above code makes box1 appear on top of box2 on all browsers except IE 6+ as positioned elements do generate a new stacking context, starting with z-index of 0.     In this case since box3 and box2 are siblings (on the same level), and box3 's z-index is less than that of box2, so  box2 and its child nodes ( on a higher stacking context ) will be always on top of box3 and its child nodes.. even if some of box3's child nodes have higher z-index than those of box2 and its child nodes  ( box1 has z-index of 4000 but is still displayed beneath box2 of z-index 3000).      
The solution here is to put box1 in a stacking context higher than that of box2 by making z-index of box3 higher than that of box2. 
#box3 {
  z-index: 30001;
}

Now box1 is on top of box2 as desired !  How about two elements nested in <td> cells of the same table like this: 
<table>
    <tr>
        <td class="td3">
             <div class="box1"></div>
        </td>
    </tr>

    <tr>
        <td>
             <div class="box2"></div>
        </td>
    </tr>
</table>

All you need to do is set the z-index of td3 higher than that of box2 to make td3 and its child nodes (including box1) stay on top of box2. 
.td3 {
    position: relative;
    z-index: 3001;
}

.box {
	width: 50px;
	height: 50px;
	position: absolute;
}

#box1 {
         z-index: 4000;
}

#box2 {
         z-index: 3000;
}

You will notice I set td3 to position:relative so that the TD cell still keeps its relative position with respect to other cells in the table.

That is for today :) Feel free to share your ideas on this bug IE bug with us..


Cheers,

Totti

fdfd<div>
 
 <div id=”box1″>
 <div id=”box2″>
 Box 2
 </div>
 </div>
 
 <div id=”box3″>
 Box 3
 </div>
 
 </div>