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

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

测试

FF下测试

运行代码框
<!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=gb2312" /> <meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /> <meta http-equiv="Description" content="这是一个在火狐中测试层叠级别（stack level)的页面" /> <meta content="all" name="robots" /> <meta name="author" content="rong179，rong179@yahoo.cn" /> <meta name="copyright" content="http://rong179.blogbus.com" /> <title>stack level 在火狐中的测试</title> <style type="text/css" media="all"> #container {position:relative;left:100px;z-index:0;background: purple;width:500px;} #container div {height:200px;width:200px;} #box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;} #box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;} #box-float {float:left;margin:-50px 100px 0 0;background-color: red;} #box-inline {background-color: gray;display:inline;padding:50px 0;} #box-p-za { position: absolute; top:50px;left:50px; background-color: green;} #box-p-zp { position: relative;z-index:1;background-color: greenyellow;} </style> </head> <body> <div id="container"> <div id="box-p-zp">这个box position:relative;z-index:1;定位元素z-index值为正 </div> <div id="box-p-za">这个box position:absolute;z-index:auto;定位元素z-index值auto</div> <div id="box-inline">这个box inline;<br />inline元素</div> <div id="box-float">这个box float; <br /><br /><br /><br /><br /><br />未定位的浮动元素</div> <div id="box-block">----这个box block;未定位的块级元素</div> <div id="box-p-zn">这个box z-index:-1;定位元素z-index值为负</div> <!- 调试之用 --> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

测试页面：
http://rong179.blogbus.com/files/12163574750.html（请分别在FF3.0和FF2.0中打开）

代码说明：

由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。

我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。

根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方，即证明上面的stack level规则。

测试结果：

在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking context的背景下面。（注意ff2.0的这个特殊性）

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=gb2312" /> <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>stack level 在IE中的测试</title> <style type="text/css" media="all"> #container {position:relative;z-index:0;background: purple;width:400px;} #container div {height:200px;width:200px;} #box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-95px;left:55px;} #box-block {background-color: aliceblue;margin-top:-170px;margin-left:30px;} #box-float {float:left;margin:-50px 0px 0 35px;background-color: red;} #box-inline {background-color: gray;display:inline;padding:50px 0;margin-left:-10px;} #box-p-za { position: absolute; top:50px;left:50px; background-color: green;} #box-p-zp { position: relative;background-color: greenyellow;z-index:1;} </style> </head> <body> <div id="container"> <div id="box-p-zp">这个box position:relative;z-index:1; </div> <div id="box-p-za">这个box position:absolute;z-index:auto;</div> <div id="box-float">这个box float</div> <div id="box-block"><br /><br /><br /><br />这个box block</div>  <div id="box-inline">这个box inline;</div> <div id="box-p-zn"><br /><br /><br /><br /><br />这个box z-index:-1;</div>  </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

测试页面：
http://rong179.blogbus.com/files/12163574751.html(请在IE下浏览)

代码说明：

此代码也是根据上面的测试思想，但由于inline元素在ie中的特殊性，把inline的代码写在了后面，事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。

测试结论：

IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。

解释：

“float元素”，“z-index：auto的定位元素”仿佛产生了新的stacking context，但其真正能产生新的stacking context的后代任按其父级stacking context定位。（但IE中“z-index：auto的定位元素”
会拥有z-index值0，产生一个新的stacking context，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中仿佛能产生新的stacking context，而在IE中则不能。

至此stack level规则内容已经完毕，现在应该能理解stack level和z-index的不同。stack level来决定这一个stacking context中各元素在z轴上的显示顺序，对于同一stack level的定位元素才由z-index进一步决定显示次序。

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

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

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

子栏目

搜索

Web

本站

最新热门推荐随机

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

北京老城墙
周日和朋友一起去崇文门那里的古城墙转了一圈，阳光很舒服。

Photoshop制作创意美丽数码天使
原图：最终效果 1、打开原图素材，按Ctrl + L打开色阶设置面板，输入色阶为0，1.0

与谋品牌-茶馆画册设计
北京与谋品牌设计净化品牌形象，提升品牌价值！详情访问：http://www.yumoubra

印度设计师TANUSHREE卡片设计

宁夏动漫插画艺术展获奖名单
近日，由宁夏自治区党委宣传部、宁夏回族自治区文化厅、银川经济技术开发区管委会等单位联合主办，宁夏

系统系	- 操作系统 - 工具软件 - 病毒安全 - 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	下　载	- 图形图像 - 多媒体 - 系统办公