⼀个css中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 = ElementById(”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 之上。其他的浏览器对这个问题会进⾏正确的解析。
jquery在一个元素后追加标签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展⽰的那样
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⽹站中的这个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⽹站上。在内容容器上应⽤ z-index 以确保它出现在那个看上去像“背景”其实却不是的图⽚上。
总结
在CSS中层叠关系是⼀个复杂的话题。本⽂并不打算针对这个话题的所有细节进⾏讨论，⽽是针对Z-index究竟是如何影响我们⽹页的层叠顺序进⾏⼀次深⼊的探讨。这⾥所说的，当被真正的全⾯理解后，我们会发现这个CSS属性是如此的强⼤。
初学者现在应该会对这个属性有了⾮常好的理解，并且会避免很多在对其的使⽤过程中经常出现的问题。另外，有基础的开发者也会对如何正确使⽤Z-index来避免很多布局⽅⾯的问题有了更为深⼊的理解，并且为创造出更多的CSS艺术作品打开了⼤门。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。