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

WebAdvocate 2010-09-07 02:47:37

加精

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

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

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

<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中会依然创建新的层叠上下文呢？让我们来试试看。

另一个更加明显的例子：

<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

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

...全文

7497 64 打赏收藏转发到动态举报

写回复

用AI写文章

64 条回复

切换为时间正序

请发表友善的回复…

发表回复

shin_chen_名字不要重复 2011-04-14

打赏
举报

auto的诱惑使我们变“懒”过一段时间，这种良好的品质就被IE敲回现实了...

hello__bill 2011-04-12

打赏
举报

曾今就错在这上面。。

aliuwr 2011-04-12

打赏
举报

51楼正解

long0124 2010-11-02

打赏
举报

为啥我看过后，你才发帖！

fuhao1668 2010-10-06

打赏
举报

不错，顶一个

i11111 2010-10-06

打赏
举报

谢谢分享,IE兼容性好烦人

fpcfqr 2010-09-13

打赏
举报

实践出真知

tanxunjun 2010-09-12

打赏
举报

顶HEN DUO 个

yuankunyang880713 2010-09-12

打赏
举报

好东西~~~~~~~~~~~~~~~~~~~~~

todd_liu 2010-09-11

打赏
举报

只记住最后一句话
还是明确指定 z-index 的值为妙。

86y 2010-09-11

打赏
举报



.all{position:relative;width:112px;height:162px;}

.all div{border:1px solid #ddd;width:100px;height:150px;background:#fff;padding:5px;}

.all .p{position:absolute;top:0;left:0;background:#eee;}

.p1{position:absolute;top:-2px;left:-2px;}

.p2{position:absolute;top:-4px;left:-4px;}



<div class="all">

	<div class="p"></div>

	<div class="p1"></div>

	<div class="p2">你。。。。好吗......</div>

</div>

最下面的会在最上面..z-index不用设置~!

skyaspnet 2010-09-10

打赏
举报

看看。。

qiaqia 2010-09-10

打赏
举报

学习谢谢分享

dinglongfei 2010-09-10

打赏
举报

学习啦

tangjs208 2010-09-10

打赏
举报

谢谢分享，顶一个

snow_xp 2010-09-10

打赏
举报

学习了

minzhong20 2010-09-10

打赏
举报

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>