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>
   

    




		


			


				
			

			
        

		  

		  

		  

		

	
 

  
Tweet
					
					





	
One Comment to “IE z-index bug”

	

	                 
   

      
      

      
                
                    

                  Veterinary 21 August 2010 at 7:28 am #          
      
      

                                
Thanks for the clear explanation. z-index is a real headache on IE6.
                                                                

                                          

      

	
    

	

		

		

		

	
	

 

 




Leave a Reply

	
Click here to cancel reply.




Username (required) :

 



Email (required) :

 



Web Site :

 






Comment :