z-index在ie下的bug
想要的最终效果：
没修复前的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>z-index在ie下的bug</title> <style type="text/css"> *{ margin:0; padding:0;} /*第一个div p 里面包含3个div*/ .p{ position:relative; width:300px; height:300px;} .div_g{ background:#333; width:300px; height:100px; position:absolute; left:0; top:0; z-index:11} .div_r{ background:#F00; width:200px; height:300px; position:absolute; left:0; top:0; z-index:12} .div_y{ background:#F90; width:300px; height:100px; position:absolute; left:0; top:120px; z-index:13} /*第二个div p2 紫色*/ .p2{ position:absolute; background:#60C; left:0; top:0; width:300px; height:300px; left:0; top:0; z-index:10} </style> </head> <body> <div class="p"> <div class="div_g"></div> <div class="div_r"></div> <div class="div_y"></div> </div> <div class="p2"></div> <h1>现在想让第一个p重叠在p2上，p的z-index值比p2的大</h1> </body> </html>
但是在ie6和ie7下是这样的：
无论把div_g、div_r、div_y的z-index值设置多大都没有效果；
网上找了一下答案，才知道是p里面设置了position:relative;属性，在ie7以下的版本里面的所有div的z-index属性都会被重新解析，换句话就是里面的div的z-index属性无论设置多大都没效果。
解决方法：给p设置一个比p2大的z-index值；(或者删掉position:relative;这个通常是不行的)
修复后代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>z-index在ie下的bug</title> <style type="text/css"> *{ margin:0; padding:0;} /*第一个div p 里面包含3个div*/ .p{ position:relative; z-index:11; width:300px; height:300px;} .div_g{ background:#333; width:300px; height:100px; position:absolute; left:0; top:0; z-index:11} .div_r{ background:#F00; width:200px; height:300px; position:absolute; left:0; top:0; z-index:12} .div_y{ background:#F90; width:300px; height:100px; position:absolute; left:0; top:120px; z-index:13} /*第二个div p2 紫色*/ .p2{ position:absolute; background:#60C; left:0; top:0; width:300px; height:300px; left:0; top:0; z-index:10} </style> </head> <body> <div class="p"> <div class="div_g"></div> <div class="div_r"></div> <div class="div_y"></div> </div> <div class="p2"></div> </body> </html>
