CSS教程：彻底掌握Z-index属性

大多数的
CSS
属性都很容易使用。常常，当您
对标记语
言的元素使用
CSS
属性
时
，
产
生的
结
果会随着您刷新
页
面而立即呈
现
。而另一些
CSS
属性，却会有一些
复杂
，且只能在
给
定的
环
境下才会工作。

Z-index
属性便属于上面所
说
的后面的那一
组
。
Z-index
无疑的比其他任何属性都会
频
繁的
导
致（兼容性）上 的混乱和（
开发
者心理上）的挫
败
感。但滑稽的是，一旦你真正理解了
Z-index
，你会
发现
它却是一个非常容易使用的属性，并且会
为
解决很多
layout
方面的挑
战
提供
强
有力的帮助。

在
这
篇文章里，我
们
会准确的
说
明究竟什
么
是
Z-index
，它
为
什
么
会
这么
不
为
人所了解，并一起
讨论
一些
关
于它的
实

际
使用中的
问题
。我
们
同
时
会描述一些会遇到的
浏览
器
间
的差异，那些存在于已有版本的
IE
及
Firefox
浏览
器中的独特
问题
。
这
篇
关
于
Z-index
属性 的全透
视
文章将会
为
那些有着良好基
础
的
开发
者在使用
Z-index
属性
时
提供
强
大的自信心及
强
有力的帮助。

这

是什

么

？


Z-index
属性决定了一个
HTML
元素的
层
叠
级别
。元素
层
叠
级别
是相
对
于元素在
Z
轴
上（与
X
轴
Y
轴
相
对
照）的位置而言。一个更高的
Z-index
值
意味着
这
个元素在叠
层顺
序中会更靠近
顶
部。
这
个
层
叠
顺
序沿着垂直的
线轴
被呈
现
。



为
了更清晰的描述
Z-index
是如何工作的，上面的
这张图
片夸大展示了
层
叠元素在
视觉
位置上的
关
系。

自然的

层

叠

顺

序


在
一个
HTML
页
面中，自然的
层
叠
顺
序（也就是元素在
Z
轴
上的
顺
序）是由很多因素决定的。下面的是一个列表，它展示的列表
项
是
处
于一个
层
叠
环
境 （
stacking context
，
暂时
未找到合适的
汉语
翻
译
，
应该
是指
层
叠的元素所
处
的那个
层
叠的
环
境）中，
这
些
项
是
处
于
这
个
层
叠
环
境的底部的。
这
个列表中的
项
都没有被
赋
予
Z-index
属性。

元素的背景和
边
框会
创
建一个
stacking context

引用

:


·
具有
负值
的
stacking contexts
元素，按照出
现
的先后
顺
序排列（越靠后
层级
越靠上）

·
没有被定位，没有浮
动
的
块级
元素，按照出
现
的先后
顺
序排列

·
没有被定位，浮
动
的元素，按照出
现
的先后
顺
序排列

·
内
联
元素，按照出
现
的先后
顺
序排列排列

·
被定位的元素，按照出
现
的先后
顺
序排列

Z-index
属性，当被正确使用的
时
候，会改
变
自然的
层
叠
顺
序。

当然，除非元素已
经
被定位按照互相交叠的形式展
现
，否
则
元素的
层
叠
顺
序并不会特
别
的明
显
。下面的，
负边
距的
BOX
被拿来展示，用以
说
明自然的
层
叠
顺
序。



上 面的
BOX
被定
义
了不同的背景和
边
框色，并且后两个是交
错
的并且定
义
了
负值
的
顶
部
边
距，所以我
们
可以看到自然的
层
叠
顺
序。灰色的
BOX
在
标记
中位于第一 位，
蓝
色的
BOX
位于第二位，金色的排在第三。
应
用的
负边
距明确的表明
这
个事
实
：
这
些元素未被
设
置
Z-index
属性；它
们
的
层
叠
顺
序是自然的，或者是默
认
的，
复
合
规则
的。
产
生交
错
的
现
象都是因
为负值
的
边
距。

为

什

么

它会

产

生混乱？


即使
Z-index
并不是一个
难
以理解的属性，但它却会因
错误
的假
设
而使很多初
级
的
开发
人
员
陷入混乱。混乱
发
生的原因是因
为
Z-index
只能工作在被明确定
义
了
absolute
，
fixed
或
relative
这
三个定位属性的元素中。

为
了
证
明
Z-index
只能工作于被定位了的元素中，
这
里有同
样
的三个
BOX
，它
们应
用了
Z-index
属性来
尝试
打破他
们
自然的
层
叠
顺
序。



灰色的BOX
具有“9999”
的Z-index

值
，
蓝
色的BOX
有“500”
的Z-index

值
，金色的有“1”
的Z-index

值
。
合乎
逻辑
的，你会
认为这
三个
BOX
的
层
叠
顺
序会倒
过
来。但事
实
却不是
这样
，因
为这
些元素都没被
设
定
position
属性。

下面是同
样
的三个BOX
，分
别
都被
设
置了position:
relative
，他
们
的Z-index

值还
是按照上面那段
设
定。



现
在的
结
果是我
们
所期待的了：
这
些元素的
层
叠
顺
序
实现
了反向；灰色的
BOX
覆盖在
蓝
色之上，
蓝
色的覆盖在金色之上。

语

法


#grey_box {

width: 200px;

height: 200px;

border: solid 1px #ccc;

background: #ddd;

position: relative;

z-index: 9999;

}

#blue_box {

width: 200px;

height: 200px;

border: solid 1px #4a7497;

background: #8daac3;

position: relative;

z-index: 500;

}

#gold_box {

width: 200px;

height: 200px;

border: solid 1px #8b6125;

background: #ba945d;

position: relative;

z-index: 1;

}

重
复
一下，Z-index
属性只能工作于那些被定
义
了position
属性的元素中。
这
并没有被足
够
的重
视
，尤其是
对
于那些新手。

运用JavaScript



如果你希望通
过
JavaScript
为
一个元素
动态
的加上Z-index
属性，其
语
法同其他大部分CSS
元素能被存取
类
似，就是使用“

驼
峰命名法”
取代CSS
属性中的
连
字符，就像下面的代
码
展
现
的那
样
。

var myElement = document.getElementById(”gold_box”);

myElement.style.position = “relative”;

myElement.style.zIndex = “9999″;

在IE
和 Firefox
中的不当解析（兼容性

问题

）


在某些特定的情况下，
关
于Z-index
属性的解析会在IE6
、IE7
以及Firefox2
版本中存在一些小小的前后矛盾。

IE

中的<select>
元素：

IE6
中的<select>
元素是一个窗口控件，所以它
总
是出
现
在
层
叠
顺
序的
顶
部而不会
顾
及到自然
层
叠
顺
序、position
属性或者是Z-index
。下
图
展示的就是
这
个
问题
。



<select>
元素出
现
在了
顶
部，它被
设
置了“
相
对
定位”
并且Z-index

值为
“1”
。金色的BOX
在
这
个
层
叠
顺
序中排在了第二位，它的Z-index

值
是 “9999”
。
因
为
自然
层
叠
顺
序及
Z-index
值
的原因，在我
们
目前所用的所有
浏览
器中金色的
BOX
都会排在
顶
部，但
IE6
除外。



这
个
IE6
的
BUG
导
致了很多覆盖在
<select>
元素上的下拉菜
单
在
弹
出下拉
选项时
失
败
的
问题
。一个解决
办
法是使用
JavaScript
临

时隐
藏
<select>
元素，等到下拉菜
单
的下拉
项
收回
时
再将
<select>
显
示出来。其他的
办
法会
涉
及到使用
<iframe>
。

IE6/IE7

中被定位了的父容器：


因父容器（元素）被定位的
缘
故，
IE6/7
会
错误
的
对
其
stacking context
进
行重置。
为
了演示
这
个多少有些
复杂
的
BUG
，我
们
再一次的放置两个
BOX
，但
这
次我
们
会将第一个
BOX
放置在一个被定位了的元素里。



灰色BOX
的z-index

值
是“9999”
；
蓝
色BOX
的z-index

值
是“1”
，
这
两个BOX
都被
设
置了position
。
所以，正确的
执
行
应该
是灰色的
BOX
覆盖在
蓝
色的之上。

但
是在
IE6
和
IE7
中，我
们
却会看到
蓝
色的
BOX
处
于灰色的之上。
这
是由灰色
BOX
外
层
的父容器也被
设
置了定位造成的。
这
两款
浏览
器
错误
的将被定位的父容 器的
stacking context
进
行了
“
重置
”
，但却不
应该这样
。灰色的
BOX
拥
有一个非常高的
Z-index
值
，它理
应
因
为处
在
蓝
色
BOX
之上。其他的
浏览
器
对这
个
问题
会
进
行正确的解析。

Firefox 2

中的

负值

：


在Firefox2
版本中，一个
负
的Z-index

值
会使元素位于stacking
context
的后面，而不是位于公
认
的背景和
边
框
这样
的元素stacking context
之前。下面的截
图
展示了
这
个Firefox
2
的BUG
。



下面的是上面截
图
的HTML
版本（限于目前博客所限，做不到能
够
像Smashing Magazine
那
样
的内容部分
显
示code demo
，需要
查
看原始
实
例
请
去原文章
查
看） ，如果你在Firefox
3
或者其他目前正在被使用的
浏览
器中
查
看，你会看到正常的解析
结
果：灰色BOX
的背景（元素stacking
context
的基底）出
现
在所有
实
物的下面，并且灰色BOX
内部的文字出
现
在
蓝
色BOX
的上面。



普遍

应

用的展示


对页
面中的元素
应
用
z-index
属性可以非常便捷的解决各
种
各
样
的
layout
挑
战
，同
时
使得
设计
者可以在他
们
的
设计
中使用
层
叠的
项
目
进
行更多的
创
造。

交

错

的滑

动门

菜

单

：


一个
对这
个
CSS
属性
实际应
用的案例：
CTCOnlineCME

这
个网站
对
“
正被点
击
”
的
tab
使用
Z-index
属性及清晰交
错
的
PNG
图
片，
创
造出非常好的效果。



CSS

气泡：


Z-index
属性
还
可以用来
实现
基于CSS
的提示气泡，就像下面trentrichardson.com
展示的那
样



Light Box

：


如果不是因
为应
用了z-index
属性，
现
在也不会有那
么
多的品
质优
秀的Light
Box
脚本可以免
费
使用，比如
说
JQuery
的一个插件FancyBox
。



Light box
脚本使用半透明的
PNG
图
片来使背景
变
暗，之后拿来一个新的元素，
经
常会使用
类
似窗口的
DIV
，将之放置在前排。覆盖住屏幕的
PNG
和之后的
DIV
都使用
Z-index
属性以确保
这
2
个元素会位于
页
面其他元素之上。

下拉菜

单

：


类
似于Brainjar’s classic Revenge of the Menu Bar
的下拉菜
单
使用Z-index
以确保菜
单
的按
钮
和他
们
的下拉
项
位于
层
叠的
顶
部。



画廊效果的

图

片展示：


将JQuery animation
和Z-index

组
合可以
创
造出幻灯片或画廊式的卓越效果。usejquery.com

网站中的
这
个demo
向我
们
展示了
这
两者的
绝
妙
组
合
带给
我
们
的惊喜。



Polaroid Photo Gallery by Chris
Spooner

采用功能更
为强
大的CSS3
同Z-index
配合，
创
造出了一个当鼠
标
划
过时
会重新
码
放的超cool
效果。



在Fancy Thumbnail
Hover Effect
中Soh Tanaka
使用Query

为
基
础
的脚本改
变
z-index
的
赋值
。



Stu Nicholls

所做的CSS


实验

：


Stu Nicholls
在他的网站
CSSplay
中
阐释
了众多的CSS
的案例。下面是一些
关
于z-index
属性的作品。

CSS

图
片地
图



CSS
游
戏



CSS
模仿框架



增

强

版的

层

叠布局：


24 ways

这
个网站以
Z-index
为
工具来提升它的模板体
验
，将年份和日期的
长
度、
宽
度延伸到和网站外
层
容器同等并相互交
织
，
创
造出了一个非常有趣的效果。



奇异的网摘

栏

：


Janko At Warp Speed

这
个网站在“
奇异的网摘
栏
”
中使用了Z-index
。



完美的整

页

背景

图

：


Chris Coyier

阐
述了
这
个技
术
并将之
应
用到了ringvemedia.com

网站上。在内容容器上
应
用 z-index
以确保它出
现
在那个看上去像“
背景”
其
实
却不是的
图
片上。



总结


在
CSS
中
层
叠
关
系是一个
复杂
的
话题
。本文并不打算
针对这
个
话题
的所有
细节进
行
讨论
，而是
针对
Z-index
究竟是如何影响我
们
网
页
的
层
叠
顺
序
进
行一次深入的探
讨
。
这
里所
说
的，当被真正的全面理解后，我
们
会
发现这
个
CSS
属性是如此的
强
大。

初学者
现
在
应该
会
对这
个属性有了非常好的理解，并且会避免很多在
对
其的使用
过
程中
经
常出
现
的
问题
。另外，有基
础
的
开发
者也会
对
如何正确使用
Z-index
来避免很多布局方面的
问题
有了更
为
深入的理解，并且
为创
造出更多的
CSS
艺术
作品打
开
了大
门
。