马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
网页制造poluoluo文章简介：全透视:CSSZ-index属性
翻译堂主的博客
十分好的一篇手艺文档，翻译自LouisLazaris2009年9月15日宣布的《TheZ-IndexCSSProperty:AComprehensiveLook》，信任会匡助良多像我一样的前端狂！
原作者保存一切版权。
EN文欠好，接待各路牛头匡正。
------------------------------------------------
年夜多半的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轴上的按次）是由良多要素决意的。上面的是一个列表，它展现的列表项是处于一个层叠情况（stackingcontext，临时未找到符合的汉语翻译，应当是指层叠的元素所处的谁人层叠的情况）中，这些项是处于这个层叠情况的底部的。这个列表中的项都没有被付与Z-index属性。
元素的背景和边框会创立一个stackingcontext
援用:
·具有负值的stackingcontexts元素，依照呈现的前后按次分列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，依照呈现的前后按次分列
·没有被定位，浮动的元素，依照呈现的前后按次分列
·内联元素，依照呈现的前后按次分列分列
·被定位的元素，依照呈现的前后按次分列
Z-index属性，当被准确利用的时分，会改动天然的层叠按次。
固然，除非元素已被定位依照相互交叠的情势展示，不然元素的层叠按次其实不会出格的分明。上面的，负边距的BOX被拿来展现，用以申明天然的层叠按次。
下面的BOX被界说了分歧的背景和边框色，而且后两个是交织的而且界说了负值的顶部边距，以是我们能够看到天然的层叠按次。灰色的BOX在标志中位于第一名，蓝色的BOX位于第二位，金色的排在第三。使用的负边距明白的标明这个现实：这些元素未被设置Z-index属性；它们的层叠按次是天然的，大概是默许的，复合划定规矩的。发生交织的征象都是由于负值的边距。
网页制造poluoluo文章简介：全透视:CSSZ-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:solid1px#ccc;
background:#ddd;
position:relative;
z-index:9999;
}
#blue_box{
width:200px;
height:200px;
border:solid1px#4a7497;
background:#8daac3;
position:relative;
z-index:500;
}
#gold_box{
width:200px;
height:200px;
border:solid1px#8b6125;
background:#ba945d;
position:relative;
z-index:1;
}
反复一下，Z-index属性只能事情于那些被界说了position属性的元素中。这并没有被充足的器重，特别是关于那些老手。
网页制造poluoluo文章简介：全透视:CSSZ-index属性
使用JavaScript
假如你但愿经由过程JavaScript为一个元素静态的加上Z-index属性，其语法同其他年夜部分CSS元素能被存取相似，就是利用“驼峰定名法”代替CSS属性中的连字符，就像上面的代码展示的那样。
varmyElement=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会毛病的对其stackingcontext举行重置。为了演示这个几有些庞大的BUG，我们再一次的安排两个BOX，但此次我们会将第一个BOX安排在一个被定位了的元素里。
灰色BOX的z-index值是“9999”；蓝色BOX的z-index值是“1”，这两个BOX都被设置了position。以是，准确的实行应当是灰色的BOX掩盖在蓝色的之上。
可是在IE6和IE7中，我们却会看到蓝色的BOX处于灰色的之上。这是由灰色BOX外层的父容器也被设置了定位酿成的。这两款扫瞄器毛病的将被定位的父容器的stackingcontext举行了“重置”，但却不该该如许。灰色的BOX具有一个十分高的Z-index值，它理应由于处在蓝色BOX之上。其他的扫瞄器对这个成绩会举行准确的剖析。（我之前有一篇《z-index属性之IE/FF下异性分歧貌》的博文，内里触及的就是这个BUG）
网页制造poluoluo文章简介：全透视:CSSZ-index属性
Firefox2中的负值：
在Firefox2版本中，一个负的Z-index值会使元素位于stackingcontext的前面，而不是位于公认的背景和边框如许的元素stackingcontext之前。上面的截图展现了这个Firefox2的BUG。
上面的是下面截图的HTML版本（限于今朝博客所限，做不到可以像SmashingMagazine那样的内容部分显现codedemo，必要检察原始实例请往原文章检察），假如你在Firefox3大概其他今朝正在被利用的扫瞄器中检察，你会看到一般的剖析了局：灰色BOX的背景（元素stackingcontext的基底）呈现在一切什物的上面，而且灰色BOX外部的笔墨呈现在蓝色BOX的下面。
广泛使用的展现
对页面中的元素使用z-index属性能够十分便利的办理林林总总的layout应战，同时使得计划者能够在他们的计划中利用层叠的项目举行更多的制造。
交织的滑动门菜单：
一个对这个CSS属性实践使用的案例：CTCOnlineCME这个网站对“正被点击”的tab利用Z-index属性及明晰交织的PNG图片，制造出十分好的效果。
网页制造poluoluo文章简介：全透视:CSSZ-index属性
CSS气泡：
Z-index属性还能够用来完成基于CSS的提醒气泡，就像上面trentrichardson.com展现的那样
LightBox：
假如不是由于使用了z-index属性，如今也不会有那末多的品德优异的LightBox剧本能够无偿使用，好比说JQuery的一个插件FancyBox。
Lightbox剧本利用半通明的PNG图片来使背景变暗，以后拿来一个新的元素，常常会利用相似窗口的DIV，将之安排在前排。掩盖住屏幕的PNG和以后的DIV都利用Z-index属性以确保这2个元素会位于页面其他元素之上。
下拉菜单：
相似于Brainjar’sclassicRevengeoftheMenuBar的下拉菜单利用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部。
网页制造poluoluo文章简介：全透视:CSSZ-index属性
画廊效果的图片展现：
将JQueryanimation和Z-index组合能够制造出幻灯片或画廊式的出色效果。usejquery.com网站中的这个demo向我们展现了这二者的尽妙组合带给我们的欣喜。
PolaroidPhotoGallerybyChrisSpooner接纳功效更加壮大的CSS3同Z-index共同，制造出了一个当鼠标划过期会从头码放的超cool效果。
在FancyThumbnailHoverEffect中SohTanaka利用Query为基本的剧本改动z-index的赋值。
网页制造poluoluo文章简介：全透视:CSSZ-index属性
StuNicholls所做的CSS实行：
StuNicholls在他的网站CSSplay中阐释了浩瀚的CSS的案例。上面是一些关于z-index属性的作品。
CSS图片舆图
CSS游戏
CSS仿照框架
加强版的层叠结构：
24ways这个网站以Z-index为工具来提拔它的模板体验，将年份和日期的长度、宽度延长到和网站外层容器一律并互相交叉，制造出了一个十分风趣的效果。
奇怪的网摘栏：
JankoAtWarpSpeed这个网站在“奇怪的网摘栏”中利用了Z-index。
完善的整页背景图：
ChrisCoyier论述了这个手艺并将之使用到了ringvemedia.com网站上。在内容容器上使用z-index以确保它呈现在谁人看上往像“背景”实在却不是的图片上。
总结
在CSS中层叠干系是一个庞大的话题。本文其实不盘算针对这个话题的一切细节举行会商，而是针对Z-index事实是怎样影响我们网页的层叠按次举行一次深切的切磋。这里所说的，当被真实的周全了解后，我们会发明这个CSS属性是云云的壮大。
初学者如今应当会对这个属性有了十分好的了解，而且会制止良多在对其的利用过程当中常常呈现的成绩。别的，有基本的开辟者也会对怎样准确利用Z-index来制止良多结构方面的成绩有了更加深切的了解，而且为制造出更多的CSS艺术作品翻开了年夜门。
延长浏览
- CSSz-indexProperty–w3schools
- ElaborateDescriptionofStackingContexts–W3C
- z-index–SitePointCSSReference
- Howz-indexWorks–ScreencastbyChrisCoyier
- z-indexattribute–MSDN
关于作者
LouisLazaris是一个WEB开辟方面的作者和自在计划师，他住在加拿年夜的多伦多市，在WEB开辟方面有着9年履历。他在他的博客ImpressiveWebs上宣布WEB计划文章及教程。
</p>
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 | 
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:35:02
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜