关于JS中的z-index

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 属性的解析会在IE六、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的赋值。

 

 

本文转载于：http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html