ie8 z-index

• 在IE下出现的问题

• 当定位元素的 'z-index' 未设置时（默认为 auto），在 IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

• 新的局部叠加上下文即为在当前div中，产生局部的层级关系

• 这个问题将导致定位元素的层叠关系在不同浏览器出现很大的区别，严重的可导致页面布局混乱、内容覆盖等。

• 受影响的浏览器有IE6 IE7 IE8(Quriks Mode)
  分析以下代码

<style type="text/css">
  body { margin:0; }
  .p1{ top:20px; height:50px; width:150px; background-color:blue;}
  .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
  .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>

<div style="position:relative;" class="p1">1
    <div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>

image.png

再来一个例子：

<style>
  .parent{width:200px; height:200px; padding:10px;}
  .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
  .lt50{left:50px;top:50px;}
</style>

<div style="position:absolute; background:lightgrey;" class="parent">
    <div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>
    <div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>
</div>
<div style="position:absolute;left:80px;top:80px;background:black;" class="parent">
    <div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>
    <div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>
</div>

image.png

如果我们要动态渲染某个区域，设置z-index时就不能直接在css中设置了，因为渲染出来的div都是平级的，此时设置z-index不会改变当前的局部的层级关系，故我们只能通过动态渲染z-index来达到我们的效果，以下是代码：

//定义一个zIndex数据
var data = {
"zIndex":[100,99,98],
}
//使用underscore将data中的数据渲染到页面上
<div class="searchElect" style="z-index:<%- data.zIndex[n] %>">

</div>