当前位置：首页 → 问答吧 → 【分享】z-index 默认值引起的兼容性问题

【分享】z-index 默认值引起的兼容性问题

时间：2010-09-07

来源：互联网

在说说标准系列的这一帖中：说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)，谈到了层叠级别和层叠上下文，说的通俗易懂点儿就是元素谁在前面显示渲染……

其中说到 'z-index'值是是生成新层叠上下文的决定性值，并且，明确规定 z-index:auto 是不生成新的层叠上下文的，这时候，它里面的元素跟它处于同一个层叠上下文中。

但往往理论和实践是不相符的，看例子：
HTML code

<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>
<body>
<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>
</body>

根据 W3C CSS2.1 规范中的说明，上面代码中的定位元素【p1】和【p3】由于未设置 'z-index' 特性，会使用默认值 auto，不会创建新的局部层叠上下文，而定位元素【p2】设置了 z-index:1 则会创建新的层叠上下文。

另外，在同一根层叠上下文中，同为 z-index:auto 的定位元素【p1】和【p3】，它们的层叠级别相同，但【p3】在【p1】之后，所以在 Z 轴上【p3】比【p1】靠前显示，又，【p2】层叠上下文的层叠级别为正数，所以【p2】的层叠级别要比【p3】高。因此，它们在 Z 轴上的顺序为：（遵循 back-to-font）【p1】 -> 【p3】 -> 【p2】。从颜色上说是：蓝色-》红色-》黄色。
实际情况却不是这样的，请看截图：

IE又出乎我们的意料了。
那么，是因为 z-index的默认值在IE中跟其他浏览器中不同呢，还是因为在 z-index:auto的时候在IE中会依然创建新的层叠上下文呢？让我们来试试看。

另一个更加明显的例子：
HTML code

<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>

按道理讲两个【parent】都不应该产生层叠上下文，因此根据层叠级别的规则，其中的子元素应该按照 z-index值的大小排列，因此，从后往前是：1-》2-》10-》20。
截图：

可见，在IE6 IE7 IE8(Q)中，两个【parent】都创建了新的层叠上下文，因此出现了上面截图中的情况。

还是明确指定 z-index 的值为妙。

原文地址
http://www.w3help.org/zh-cn/causes/RM8015

更多兼容性问题：
【分享】浏览器兼容性问题目录

作者: WebAdvocate 发布时间: 2010-09-07

谢谢分享，顶一个

作者: fdsa888 发布时间: 2010-09-07

谢谢分享，顶一个

作者: jhua2009 发布时间: 2010-09-07

实践才是硬道理

作者: xxc3303 发布时间: 2010-09-07

该回复于2010-09-07 16:48:21被管理员删除