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牛 在百忙之中帮我分析 代码找出解决方法 并讲解！十分感谢！

 

posted @ 2013-01-04 16:17  技安  阅读(2534)  评论(0)    收藏  举报