ie7 的 relative z-index 穿透问题
公司一个项目 遇到这样一个问题
一个ul 做的下拉
原本应该是酱紫
可是ie7 却是这样
后经过网友Jikey牛的指点 原来这个玩意叫做 ie7 relative 穿透
意思是很多层容器 都被 设置了z-index 的时候 以最外面的那个z-index的值为准
项目中挡住li的后面几项的 菜单div 恰好也被我设置了 z-index （absolute 布局）
然而 ul 以及 装载整个搜索 组件的div 我没有设置z-index
所以ie7下 下面的层级就比ul的要高！
最后我仔细地 昏息了一下：
css:
1 *{margin: 0;padding: 0;} 2 ul,li{padding: 0;margin: 0;list-style: none; } 3 li{ background:#fed22f;width: 80px;text-align: center;height: 25px;line-height: 25px;border-bottom: 1px #fff solid} 4 #show li ul{ /*display:none;*/ display:block;} 5 #show:hover li ul{ display:block;} 6 #hide{ position: absolute;z-index: 10000; top:0;left:0;}
html：
1 <body> 2 <div style="width: 100%;height: 100px; background: #a00000; padding-top: 1px;"> 3 <div style=" height: 26px; width: 100px; position: relative; border: 2px #fa8072 solid; margin: 40px 0 0 100px"> 4 <ul id="show"> 5 <li> 6 <ul id="hide"> 7 <li>TEST</li> 8 <li>TEST</li> 9 <li>TEST</li> 10 <li>TEST</li> 11 <li>TEST</li> 12 13 </ul> 14 </li> 15 </ul> 16 </div> 17 </div> 18 <div style=" width: 100%;height: 400px; background: #222; position:absolute; z-index: 1000;"></div> 19 </body>
只有当父级 设置了 position relative && z-index 小于 遮罩物 (上面18行的代码) 的z-index （就是说遮罩物也要设置z-index和 position） 才会发生
解决方案：在 html 代码第3行加一句z-index: 1001; 也就是比18行中的z-index 大就行了！
学一点 记一点！
再次感谢无私的网友Jikey牛 在百忙之中帮我分析 代码找出解决方法 并讲解！十分感谢！
