元素层叠级别及z-index剖析

创建日期：2008年7月23日来自：蓝色理想浏览：252次作者：匿名

一些问题的解释：

怿飞版主在《z-index在IE中的迷惑》一文中最后提到的问题：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="z-index,IE,迷惑" /> <meta http-equiv="Description" content="这是一个z-index在IE中的迷惑的演示" /> <meta content="all" name="robots" /> <meta name="author" content="blank,怿飞" /> <meta name="copyright" content="http://www.planabc.net" /> <title>z-index在IE中的迷惑</title> <style type="text/css" media="all"> #box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; } </style> </head> <body> <div id="box1">为什么负值的定位元素在IE和FF下显示不一致呢？Why？</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

演示地址：
http://rong179.blogbus.com/files/12163573190.html

认为：
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。

真是这样吗？

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /> <meta http-equiv="Description" content="这是一个在IE中测试层叠级别（stack level)的页面" /> <meta content="all" name="robots" /> <meta name="author" content="rong179，rong179@yahoo.cn" /> <meta name="copyright" content="http://rong179.blogbus.com" /> <title>body 是否默认有position属性</title> <head> <style> *{ margin:0; } html{ background:silver; } body{ height:200px; width:200px; background:green; text-align:right; /*ie中position:relative;加上这条试试*/ /*ff中opacity:0.99;加上这条试试*/ } div{ position:absolute; left:100px; top:100px; width:200px; height:200px; background:yellow; z-index:-1; } </style> </head> <body> BODY:<br />z-Index:0 <div>DIV:<br />z-Index:-1</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

演示地址：
http://rong179.blogbus.com/files/12163572440.html

分析

box1显示在body的下方，根据上面的stack level规则，IE中，如果body默认了一个位置属性，即body是其父级stacking context，box1应显示在其上方，事实却不是这样。而且当我们给body加上position：relative以后，显示效果和stack level规则一致。所以body并没有默认位置属性。

那为什么负值的定位元素在IE和FF下显示不一致呢？

ie 中根据stack level规则： z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。

ff2.0 中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。

另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？

推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。

上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的stack level规则自己分析）符合推测。
在w3c的说明中也证明这点

In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
[CSS3COLOR].

总结：

在一个stacking context中元素的z-轴显示顺序，由元素所处的 stack level 决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。

ie中给元素设置position属性（static除外）可产生新的stacking context
ff中给元素设置opacity属性（1除外）可产生新的stacking context

除此之外（也许设置其他属性也会产生新的stacking context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将按照新的stacking context，定位。

首页上一页 1 2 3 尾页

责编：yezi
相关搜索：元素层叠级别及z-index剖析

上一篇：标记语言——应用CSS
下一篇：美化段落文本 Ⅱ

嗷嗷毙技术网版权申明：大家可以自由转载我站点的文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来链接，自行链接）。文章版权归作者所有。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。

子栏目

搜索

Web

本站

最新热门推荐随机

Photoshop教程：打造长颈鹿的音乐壁纸特效
本文由中国教程网飘零的枫叶编译，转载请保留此信息！在国外网站上看到的效果，感觉蛮不错，

photoshop初级教程：教你制作投影的简单方法
最终效果： 1.打开图片把图呕出来，选中要做投影的图片，然后在图层样式选择投

Flash鼠绘新手入门教程：绘制逼真螳螂的方法
本文由中国教程网 zctmh0336(诚信为人) 原创，转载请保留此信息 “Flash动画鼠

Photoshop合成教程：打造非主流颓废效果
素材来自形色素材图1 素材图2 最终效果图另一种效果图

Photoshop手绘教程：绘制水墨梅花入卷轴效果中国教程网论坛
本文由中国教程网四季轮回原创，转载请保留此信息！　　梅花的枝条表面具有很大的不规则性，

暗夜中的华丽：褪去浮华疯狂的爱上你

极致美胸诱惑——回忆那曾经的汹涌波涛

广告摄影师的把戏：眼球爆炸，视线模糊

惊艳的空中摄影：男人们高高在上的梦想
当摄影遇到飞机，那些由云朵构成的世界，那些被阳光照射着的梦想，顷刻间离生活很近很真实

让世界瞩目！2007洛杉矶车展顶级跑车赏
　　作为北美地区仅次于底特律车展的重要汽车盛会，洛杉矶车展历来都会受到各方的瞩目。不过，限于条件

过季荷花别样红
夏天都过去了，我那卷放了Ｎ久的胶片才冲洗出来，还要感谢老崔帮忙扫描，要不然猴年马月才能跟各位见面

极致美胸诱惑——回忆那曾经的汹涌波涛

洞房花烛夜完美婚房装修设计六大看点
新婚燕尔，前来祝福的亲朋好友络绎不绝，因此客厅的布置不易太过特立独行，应以舒适亲切为主，既要

墨西哥设计师Lourdes Zolezzi海报设计

分离设计! Mac Tablet概念笔记本电脑!
笔记本的概念机型总能让人提起无尽遐想，最近由国外媒体曝光的一款苹果概念机型再一次引起了网友的极大兴趣

Photoshop打造马力汽车
原文：http://www.6lotus.com/archives/535 作者：Alvaro

跳出想象的格子
“Aerials, in the sky, when you lose small mi

KWK PROMES 别墅设计欣赏(2)

猛虎出笼-CGArt ®第10期发行(免费下载)
寄语时光飞沙岁月悠悠淘尽多少依稀“网”事却总也淘不尽心中那份火一样的激情因为在网络的另一头有

Vista Stock Icons设计

系统系	- 操作系统 - 工具软件 - 病毒安全 - Vista专区	WEB2.0	- 奇趣 - 发现分享 - 评论员文章	视　频	- 体育 - 娱乐 - 科技 - 教程
办公系	- Word - Excel - Powerpoint - 网站建设	动画系	- Flash - Ascript - Flex - MsE Design 教程	编程系	- Asp - Asp.Net - Php - Jsp、Java - CGI/perl
艺术系	- 酷赏 - 工业 - 建筑 - 界面 - 平面 - 视觉	网站系	- HTML/Xhtml - Js、Ajax - Css - XML、XSLT	下　载	- 图形图像 - 多媒体 - 系统办公