|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
z-index属性简介
援用:
z-index:auto|number
auto:默许值。
number:无单元的整数值，可为正数。
z-index值较年夜的元素将叠加在z-index值较小的元素之上。关于未指定此属性的定位工具，z-index值为负数的工具会在其之上，而z-index值为正数的工具在其之下。
注重：这个属性不会感化于窗口控件，如select工具。
在IE5.5+中，iframe工具入手下手撑持此属性。而在之前的扫瞄器版本中，iframe工具是窗口控件，会疏忽此属性。
z-index属性合用于定位元素（position属性值为relative或absolute或fixed的工具），用来断定定位元素在垂直于显现屏偏向（称为Z轴）上的层叠按次（stackorder）。
每个定位元素都回属于一个stackingcontext。根元素构成rootstackingcontext，而其他的stackingcontext则由定位元素发生（此定位元素的z-index被界说一个非auto的z-index值），定位子元素会以这个localstackingcontext为参考，用不异的划定规矩来决意层叠按次。而且stackingcontext和containingblock之间并没有一定接洽。
当stackingcontext一样的时分，就用z-index的值来决意如何显现，假如z-index也不异（即stacklevel不异），则依照档中厥后者居上的准绳（back-to-front）的按次来层叠。
当任何一个元素层叠另外一个包括在分歧stackingcontext元素时，则会以stackingcontext的层叠级别（stacklevel）来决意显现的前后情形。也就是说，在不异的stackingcontext下才会用z-index来决意前后，分歧时则由stackingcontext的z-index来决意。比方：
定位元素A（z-index:100）内里有定位元素A1（z-index:300），而定位元素B和元素A兄弟干系（z-index:200）。你会发明不管A1的z-index是多年夜，也会被z-index是200的B所掩盖，由于A的z-index只要100。
浏览更具体的内容：http://www.w3.org/TR/CSS21/visuren.html#z-index
起首先来看一个演示例子的代码部分。
XHTML部分：
<divid="container">
<divid="box1">这个box应当在下面</div>
</div>
<divid="box2">这个box应当鄙人面，IE扫瞄器会对定位元素发生一个新的stackingcontext，乃至当元素z-index的为“auto”。</div>
CSS部分：
#container{position:relative;}
#box1{position:absolute;top:100px;left:210px;width:200px;height:200px;background-color:yellow;z-index:20;}
#box2{position:absolute;top:50px;left:160px;width:200px;height:200px;background-color:green;z-index:10;}
两个box被完整的定位，背景致为黄色的box1具有z-index属性值20，而背景致为绿色的box2具有z-index属性值10，独一的区分在于背景致为黄色的box1被放在了一个界说了属性position:relative的div中，而且在文档源代码中位前。
依据上述代码和z-index的属性简介，我们来剖析下面代码将会发生的效果地位。
CSSspecification中分明的划定了除根元素，只要定位元素的z-index被界说一个非auto的z-index值才干发生新的stackingcontext。而例子中被绝对定位的元素并没有界说z-index，即z-index为默许值auto。以是按理他不会影响子元素的层叠按次。即背景致为黄色的box1和背景致为绿色的box2的stackingcontext不异，即都为根元素发生的rootstackingcontext。再依据划定规矩中当stackingcontext一样的时分，就用z-index的值来决意如何显现的道理，则应当z-index属性值20的背景致为黄色的box1在z-index属性值10背景致为绿色的box2之上。
上面我们在FF和IE平分别测试终极的效果，会发明FF中显现的效果和下面剖析的效果是完整分歧的，而IE中的显现却纷歧致。
演示地点：http://www.planabc.net/demo/z-index01.html
利诱：在IE的z-index属性值10背景致为绿色的box却在了z-index属性值20的背景致为黄色的box1之上，和我们剖析的了局完整纷歧致，为何呢？
解惑：实在这是IE扫瞄器（windows）的一个BUG――在IE扫瞄器中，定位元素会发生一个新的stackingcontext，而且从z-index的值为0入手下手。
如今让我们来了解下面的演示在IE中的显现逻辑。设置了绝对定位的container发生一个新的stackingcontext，以是其被定位的子元素背景致为黄色的box1以这个新的stackingcontext为参考来决意层叠按次。而背景致为绿色的box2此时和背景致为黄色的box1的父元素container为统一个stackingcontext，以是他们之间依照z-index来决意层叠按次，即z-index属性值10背景致为绿色的box2在z-index属性值0的container之上。
实在这个BUG的影响局限很广，只是人人平常不太注重。上面来讲明一个最多见的呈现情形z-index的负值剖析，良多伴侣由于这个BUG的存在乃至果断的以为IE撑持z-index的负值，而FF不撑持z-index的负值。
举个例子也许更能抽象表达。
XHTML部分：
<body>
<divid="container">
<divid="box1">为何负值的定位元素在IE和FF下显现纷歧致呢？Why？</div>
</div>
</body>
CSS部分：
#container{position:relative;}
#box1{position:absolute;top:100px;left:210px;width:200px;height:200px;background-color:yellow;z-index:-10;}
演示地点：http://www.planabc.net/demo/z-index02.html
人人会发明在FF下，背景致为黄色的box1消散了，而IE下却显现。这也是我下面所说的，部分伴侣果断的以为IE撑持z-index的负值，而FF不撑持z-index的负值的缘故原由。我们要透过征象看实质。
在上个例子中的剖析，我们晓得：设置了绝对地位（position:relative）的元素但没有给出非auto的z-index就不会发生stackingcontext，也就不会影响其子元素的层叠按次。以是背景致为黄色的box1的stackingcontext为根元素发生的rootstackingcontext。在上一节中我们讲到“关于未指定此属性的定位工具，z-index值为负数的工具会在其之上，而z-index值为正数的工具在其之下”，依照划定规矩，应当是设定了z-index为-10的黄色的box1会显现在于未指定z-index属性的元素（好比body）之下。以是在FF下背景致为黄色的box1消散了。而在IE中设置了绝对地位的container会具有z-index值0，发生一个新的stackingcontext，背景致为黄色的box1在新的stackingcontext内层叠按次，故在IE中会看到显现。
不外这里另有一个成绩，关于下面的代码，我们再精简一下：
XHTML部分：
<body>
<divid="box1">为何负值的定位元素在IE和FF下显现纷歧致呢？Why？</div>
</body>
CSS部分：
#box1{position:absolute;top:100px;left:210px;width:200px;height:200px;background-color:yellow;z-index:-10;}
演示地点：http://www.planabc.net/demo/z-index03.html
人人会发明和下面没精简的代码显现的了局是分歧的。但假如用下面的了解在IE下也许没法注释通。由于此时的了解背景致为黄色的box1的stackingcontext不管在FF下仍是在IE下都是根元素发生的rootstackingcontext。
利诱：那末在IE扫瞄器中，依照划定规矩，背景致为黄色的box1也应当消散，但是却没有。
解惑：IE扫瞄器仿佛给body元素默许了一个绝对定位属性（position:relative）。
经由过程下面两个复杂的例子，我想人人应当大抵晓得为何负值的z-index在IE和FF剖析纷歧样，不是FF不撑持，而是IE的BUG
</p>
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素. |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:14:25
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜