z-Index及元素层叠优先级的理解 - 理论文档

对于z-Index这个属性，很多人可能再布局中不是很常用。只是简单的认为z-Index值高的就显示在上面。这个概念正常的比较模式下是没有问题的，可有很多时候就会让人感到困惑。

从头开始研究，假如页面又两个元素A和B。很正常的情况下排列如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ #a{background:#808;width:100px;height:200px;} #b{background:#088;width:100px;height:100px;} /*]]>*/ </style> <body> <div id="a">a</div> <div id="b">b</div> </body> </html>
提示：您可以先修改部分代码再运行

没有设置定位属性以前，我们通过设置B的负margin-top就能将B放置再A上面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" _cke_saved_href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ #a{background:#808;width:100px;height:200px;} #b{background:#088;width:100px;height:100px;margin-top:-110px;} /*]]>*/ </style> <body> <div id="a">a</div> <div id="b">b</div> </body> </html>
提示：您可以先修改部分代码再运行

在上面的基础上，先设置两个元素的定位为相对定位（为了方便观察，将B的宽度加长。）因为文档流的顺序关系，A，B的先后还是没改变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" _cke_saved_href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ #a{background:#808;width:100px;height:200px;position:relative;z-index:1} #b{background:#088;width:200px;height:100px;margin-top:-110px;position:relative;} /*]]>*/ </style> <body> <div id="a">a</div> <div id="b">b</div> </body> </html>
提示：您可以先修改部分代码再运行

这一系列的例子只是为了证明并巩固z-Index的大小在其他条件一样的情况值大的就会层叠在最前面。
很多时候当两个绝对定位元素相邻或者相交以后，就会产生一些让我们困惑的问题了。
去除A,B的z-Index值，然后分别在他们里面添加两个绝对定位的div，C和D如下例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" _cke_saved_href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ body{color:#fff;backgourn:#eee} #a{background:#ede;width:200px;height:300px;position:relative;border:2px solid #960} .c{position:absolute;background:#800;width:200px;height:200px;} .d{position:absolute;background:#008;width:200px;height:200px;} #b{background:#dee;width:300px;height:200px;position:relative;border:2px solid #a50;} /*]]>*/ </style> <body> <div id="a"> <div class="c">.c{position:absolute;background:#800;}</div> </div> <div id="b"> <div class="d">.d{position:absolute;background:#008;}</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这里再略为讲下绝对定位的参考点问题，绝对定位元素会以跟自己关系最近的一个定位（相对定位或者绝对定位）的父级元素或者父级的父级的元素的四个角作为参考点。这四个角不会像文档流元素一样会考虑父元素的padding值。绝对定位元素的参考只会以定位的父元素的margin，border值之内的角点，而不会受其padding值影响。
现在我们更改C和D的位置，让他们有相交，并且把C的z-Index设置为999，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" _cke_saved_href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ body{color:#fff;backgourn:#eee} #a{background:#ede;width:200px;height:300px;position:relative;border:2px solid #960} .c{position:absolute;background:#800;width:200px;height:200px;top:200px;left:50px;z-Index:999} .d{position:absolute;background:#008;width:200px;height:200px;} #b{background:#dee;width:300px;height:200px;position:relative;border:2px solid #a50;} /*]]>*/ </style> <body> <div id="a"> <div class="c">.c{position:absolute;background:#800;}</div> </div> <div id="b"> <div class="d">.d{position:absolute;background:#008;}</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这时候我们就发现，无论如何改变C和D的z-Index值我们都无法影响他们的层叠关系了。
只有改变A和B的z-Index属性才能影响C和D的的层叠关系。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>z-index实验</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/main.css" _cke_saved_href="css/main.css" type="text/css" media="all"/> </head> <style type="text/css"> /*<![CDATA[*/ body{color:#fff;backgourn:#eee} #a{background:#ede;width:200px;height:300px;position:relative;border:2px solid #960;z-Index:1} .c{position:absolute;background:#800;width:200px;height:200px;top:200px;left:50px;} .d{background:#008;width:200px;height:200px;position:absolute} #b{background:#dee;width:300px;height:200px;border:2px solid #a50;} /*]]>*/ </style> <body> <div id="a"> <div class="c">.c{position:absolute;background:#800;z-Index:999}</div> </div> <div id="b"> <div class="d">.d{position:absolute;background:#008;}</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这个问题就好像Photoshop中的图层组和图层的关系。假设例子中的A和B是两个图层组的话，C和D就分别是其中的图层。A和B在图层组中的上下关系决定了C和D在图层中的层叠关系。无论C的z-Index值再大，都只能再A中层叠在最前面。对于层叠优先级别在A之上的B元素，该元素及其所有子元素层叠级别都将在C之上。
因此：z-Index的大小决定元素的层叠级别应当建立再同级别的元素比较上。
很多时候我们的A和B不像本例中这么清楚。一般对于两个相交的绝对定位元素C和D。其实我们只需要找到C和D元素的定位参考元素，按如下比较，很快我们就能算出层叠优先级别。

影响层叠优先级别的因素（越往下越强）：
不同级别元素中，子元素的层叠优先级别比父元素要高。
同级别元素在文档中的先后顺序，靠后的元素层叠优先级别大于靠前的。
同级别元素中绝对定位元素优先级别大于相对定位或者其他方式定位的元素
同级别元素中z-Index值大的优先级别最高。

上一篇：三个div实现上下左右等分（自适应）
下一篇：Web 2.0及其在图书馆网站的应用研究