CSS实例教程 完全把握Z

2021-01-20 08:21 jianzhan

大多数数的CSS特性都很非常容易应用。经常,当您对标识語言的元素应用CSS特性时,造成的結果会伴随着您更新网页页面而马上展现。而另外一些CSS特性,却会有1些繁杂,且只能在给定的自然环境下才会工作中。

Z-index特性便属于上面所说的后边的那1组。Z-index无疑的比别的任何特性都会经常的致使(适配性)上的错乱和(开发设计者心理状态上)的挫败感。但搞笑的是,1旦你真实了解了Z-index,你会发现它确是1个十分非常容易应用的特性,而且会为处理许多layout层面的挑戰出示强有力的协助。

在这篇文章内容里,大家会精确的表明到底甚么是Z-index,它为何会这么不为人所掌握,并1起探讨1些有关它的具体应用中的难题。大家另外会叙述1些会遇到的访问器间的差别,那些存在于已有版本号的IE及Firefox访问器中的与众不同难题。这篇有关Z-index特性的全透視文章内容可能为那些拥有优良基本的开发设计者在应用Z-index特性时出示强劲的信心及强有力的协助。

w3school详细介绍 CSS z-index 特性

这是甚么?

Z-index特性决策了1个HTML元素的堆叠级別。元素堆叠级別是相对元素在Z轴上(与X轴Y轴相对性照)的部位而言。1个更高的Z-index值代表着这个元素在叠层次序中会更挨近顶部。这个堆叠次序沿着竖直的线轴被展现。

以便更清楚的叙述Z-index是怎样工作中的,上面的这张照片夸大其词展现了堆叠元素在视觉效果部位上的关联。

当然的堆叠次序
在1个HTML网页页面中,当然的堆叠次序(也便是元素在Z轴上的次序)是由许多要素决策的。下面的是1个目录,它展现的目录项是处在1个堆叠自然环境(stacking context,临时未寻找适合的中文汉语翻译,应当是指堆叠的元素所处的那个堆叠的自然环境)中,这些项是处在这个堆叠自然环境的底部的。这个目录中的项都沒有被授予Z-index特性。
元素的情况和边框会建立1个stacking context
引入:
·具备负值的stacking contexts元素,依照出現的前后次序排序(越靠后等级越靠上)
·沒有被精准定位,沒有波动的块级元素,依照出現的前后次序排序
·沒有被精准定位,波动的元素,依照出現的前后次序排序
·内联元素,依照出現的前后次序排序排序
·被精准定位的元素,依照出現的前后次序排序
Z-index 特性,当被正确应用的情况下,会更改当然的堆叠次序。
自然,除非元素早已被精准定位依照相互之间相叠的方式呈现,不然元素的堆叠次序其实不会非常的显著。下面的,负边距的BOX被拿来展现,用以表明当然的堆叠次序。

上面的BOX被界定了不一样的情况和边框色,而且后两个是交叠的而且界定了负值的顶部边距,因此大家能够看到当然的堆叠次序。灰色的BOX在标识中坐落于第1位,蓝色的BOX坐落于第2位,金黄的排在第3。运用的负边距确立的说明这个客观事实:这些元素未被设定Z-index 特性;它们的堆叠次序是当然的,或是默认设置的,复合型标准的。造成交叠的状况全是由于负值的边距。
 
为何它会造成错乱?
即便Z-index其实不是1个无法了解的特性,但它却会因不正确的假定而使许多初中级的开发设计人员深陷错乱。错乱产生的缘故是由于Z-index只能工作中在被确立界定了absolute,fixed或relative 这3个精准定位特性的元素中。
以便证实Z-index只能工作中于被精准定位了的元素中,这里有一样的3个BOX,它们运用了Z-index特性来尝试摆脱她们当然的堆叠次序。

灰色的BOX具备“9999”的Z-index值,蓝色的BOX有“500”的Z-index值,金黄的有“1”的Z-index值。符合逻辑性的,你会觉得这3个BOX的堆叠次序会倒过来。但客观事实却并不是这样,由于这些元素都没被设置position特性。
下面是一样的3个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; 
}
 
反复1下,Z-index特性只能工作中于那些被界定了position特性的元素中。这并沒有被充足的高度重视,特别是针对那些初学者。
 
应用JavaScript
假如你期待根据JavaScript为1个元素动态性的再加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版本号中存在1些小小的的前后左右分歧。
IE中的<select>元素:
IE6中的<select>元素是1个对话框控制,因此它一直出現在堆叠次序的顶部而不容易顾及到当然堆叠次序、position特性或是Z-index。下图展现的便是这个难题。

<select>元素出現在了顶部,它被设定了“相对性精准定位”而且Z-index值为“1”。金黄的BOX在这个堆叠次序中排在了第2位,它的Z-index值是“9999”。由于当然堆叠次序及Z-index值的缘故,在大家现阶段所用的全部访问器中金黄的BOX都会排在顶部,但IE6以外。

这个IE6的BUG致使了许多遮盖在<select>元素上的往下拉菜单在弹出往下拉选项时不成功的难题。1个处理方法是应用JavaScript临时性掩藏<select>元素,直到往下拉菜单的往下拉项取回时再将<select>显示信息出来。别的的方法会涉及到到应用<iframe>。
IE6/IE7中被精准定位了的父器皿:
因父器皿(元素)被精准定位的原因,IE6/7会不正确的对其stacking context开展重设。以便演试这个是多少一些繁杂的BUG,大家再1次的置放两个BOX,但这次大家会将第1个BOX置放在1个被精准定位了的元素里。

灰色BOX的z-index值是“9999”;蓝色BOX的z-index值是“1”,这两个BOX都被设定了position。因此,正确的实行应当是灰色的BOX遮盖在蓝色的之上。
可是在IE6和IE7中,大家却会看到蓝色的BOX处在灰色的之上。这是由灰色BOX外层的父器皿也被设定了精准定位导致的。这两款访问器不正确的将被精准定位的父器皿的stacking context开展了“重设”,但却不可该这样。灰色的BOX有着1个十分高的Z-index值,它理当由于处在蓝色BOX之上。别的的访问器对这个难题会开展正确的分析。
 
Firefox 2中的负值:
在Firefox2版本号中,1个负的Z-index值会使元素坐落于stacking context的后边,而并不是坐落于公认的情况和边框这样的元素stacking context以前。下面的截图展现了这个Firefox 2的BUG。

下面的是上面截图的HTML版本号(限于现阶段blog所限,做不到可以像Smashing Magazine那样的內容一部分显示信息code demo,必须查询初始案例请去原文章内容查询) ,假如你在Firefox 3或别的现阶段正在被应用的访问器中查询,你会看到一切正常的分析結果:灰色BOX的情况(元素stacking context的基底)出現在全部商品的下面,而且灰色BOX內部的文本出現在蓝色BOX的上面。

广泛运用的展现
对网页页面中的元素运用z-index特性能够十分方便快捷的处理各种各样各种各样的layout挑戰,另外使得设计方案者能够在她们的设计方案中应用堆叠的新项目开展更多的造就。
交叠的拖动门菜单:
1个对这个CSS特性具体运用的实例:CTCOnlineCME 这个网站对“正被点一下”的tab应用Z-index特性及清楚交叠的PNG照片,造就出十分好的实际效果。

CSS 气泡:
Z-index 特性还能够用来完成根据CSS的提醒气泡,就像下面trentrichardson.com展现的那样

Light Box:
假如并不是由于运用了z-index 特性,如今也不容易有那末多的质量出色的Light Box脚本制作能够完全免费应用,例如说JQuery的1个软件FancyBox。

Light box 脚本制作应用半全透明的PNG照片来使情况变暗,以后拿来1个新的元素,常常会应用相近对话框的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相互配合,造就出了1个当电脑鼠标划落伍会再次码放的超cool实际效果。

在Fancy Thumbnail Hover Effect 中Soh Tanaka 应用Query为基本的脚本制作更改z-index的取值。

 

Stu Nicholls所做的CSS试验:
Stu Nicholls在他的网站 CSSplay 中诠释了诸多的CSS的实例。下面是1些有关z-index特性的著作。
CSS 照片地形图

CSS 手机游戏

CSS效仿架构

提高版的堆叠合理布局:
24 ways 这个网站以Z-index为专用工具来提高它的模版体验,将年份和时间的长度、宽度拓宽到和网站外层器皿同样并互相交错,造就出了1个十分趣味的实际效果。

奇特的网摘栏:
Janko At Warp Speed 这个网站在“奇特的网摘栏”中应用了Z-index。

完善的整页情况图:
Chris Coyier 论述了这个技术性并将之运用到了ringvemedia.com 网站上。在內容器皿上运用 z-index 以保证它出現在那个看上去像“情况”实际上却并不是的照片上。

总结

在CSS中堆叠关联是1个繁杂的话题。本文其实不准备对于这个话题的全部细节开展探讨,而是对于Z-index到底是怎样危害大家网页页面的堆叠次序开展1次深层次的讨论。这里所说的,当被真实的全面了解后,大家会发现这个CSS特性是这般的强劲。
初学者如今应当会对这个特性有了十分好的了解,而且会防止许多在对其的应用全过程中常常出現的难题。此外,有基本的开发设计者也会对怎样正确应用Z-index来防止许多合理布局层面的难题有了更加深层次的了解,而且为造就出更多的CSS造型艺术著作开启了大门。