|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
声明
定位元素：
position属性值设置除默许值static之外的元素，包含relative，absolute，fixed。
平台：win/IEwin/FF
z-index
用来断定定位元素在垂直于显现屏偏向（以下称为Z轴）上的层叠按次
值：auto|整数|inherit
默许：auto
合用于：定位元素
承继性：no
了解stackingcontext
每一个box都回属于一个stackingcontext,它是元素在z轴偏向上定位的参考。根元素构成rootstackingcontext，其他stackingcontext由定位元素设置z-index为非auto时发生。如#div1{position:relative;z-index:0;}便可使id=div1的元素发生stackingcontext。stackingcontext和containingblock并没有一定接洽。
了解stacklevel
在一个stackingcontext中的每一个box，都有一个stacklevel（即层叠级别，以下一致用stacklevel），它决意着在统一stackingcontext中每一个box在z轴上的显现按次。统一stackingcontext中，stacklevel值年夜的显现在上，stacklevel值小的显现鄙人，统一stacklevel的遵守后发先至的准绳（back-to-front）。分歧stackingcontext中，元素显现按次以父级的stackingcontext的stacklevel来决意显现的前后情形。于本身stacklevel有关。注重stacklevel和z-index并非一致观点。（将在后文渐渐了解）
stacklevel划定规矩
每一个stackingcontext中可包括块级（block）元素、内联（行内inline）元素，另有设置float属性的元素、定位元素等等他们在统一父级stackingcontext中的显现按次是如何的？即stacklevel是如何的呢？好比一个块级元素和内联元素产生层叠的话谁会在下面呢？是否是谁在前面谁就在下面呢？
依据w3c关于stacklevel的先容能够得出以下stacklevel划定规矩
每一个stackingcontext都包含以下stacklevel（后发先至）：
- 父级stackingcontext的背景、界限
- z-index值为负值的定位元素（值越小越鄙人）
- 文本流中非定位的、block块级子元素
- 文本流中非定位的、float浮动子元素
- 似乎能发生stackingcontext的inline元素
不然，inline元素的stacklevel将在block元素之前。
- z-index：auto/0的定位元素
- z-index值为正的定位元素（值越年夜越在上）
以上stacklevel在扫瞄器实行情形：
firefox3.0下测试完整符合，firefox2.0下稍有分歧即：“z-index值为负值的定位元素”在“父级stackingcontext的背景、界限”之前。
ie6.0和7.0中：inline元素的stacklevel位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于统一级。
测试
FF下测试
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="Keywords"content="z-index,IE,Firefox,stackingcontext,stacklevel"/><metahttp-equiv="Description"content="这是一个在火狐中测试层叠级别（stacklevel)的页面"/><metacontent="all"name="robots"/><metaname="author"content="rong179，rong179@yahoo.cn"/><metaname="copyright"content="http://rong179.blogbus.com"/><title>stacklevel在火狐中的测试</title><styletype="text/css"media="all">#container{position:relative;left:100px;z-index:0;background:purple;width:500px;}#containerdiv{height:200px;width:200px;}#box-p-zn{position:relative;z-index:-1;background-color:yellow;top:-25px;left:-30px;}#box-block{background-color:aliceblue;margin-top:-30px;margin-left:150px;}#box-float{float:left;margin:-50px100px00;background-color:red;}#box-inline{background-color:gray;display:inline;padding:50px0;}#box-p-za{position:absolute;top:50px;left:50px;background-color:green;}#box-p-zp{position:relative;z-index:1;background-color:greenyellow;}</style></head><body><divid="container"><divid="box-p-zp">这个boxposition:relative;z-index:1;定位元素z-index值为正</div><divid="box-p-za">这个boxposition:absolute;z-index:auto;定位元素z-index值auto</div><divid="box-inline">这个boxinline;<br/>inline元素</div><divid="box-float">这个boxfloat;<br/><br/><br/><br/><br/><br/>不决位的浮动元素</div><divid="box-block">----这个boxblock;不决位的块级元素</div><divid="box-p-zn">这个boxz-index:-1;定位元素z-index值为负</div><!-调试之用--></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
测试页面：
http://rong179.blogbus.com/files/12163574750.html（请分离在FF3.0和FF2.0中翻开）
代码申明：
由前所述，假如元素的stacklevel同级则后发先至；元素的stacklevel高，这不管代码在文档中地位怎样都显现在下面，即便代码在最后面；假如元素的stacklevel低，不管代码地位怎样都将显现鄙人面，即便代码在最初面。
我们就依据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，假如我把“float元素”的代码写在“block元素”的后面，且实践显现为：“float元素”在“block元素”之上。便可证实："float元素”的stacklevel级别较“block元素”高。由于假如同级,大概“block元素”的stacklevel高都应是“block元素”显现在上。
依据以上，依据尺度中的按次，把stacklevel高的元素代码写在后面，stacklevel低的代码写在前面，假如显现了局是：代码在后面的元素显现在上方，即证实下面的stacklevel划定规矩。
测试了局：
一些成绩的注释：
怿飞版主在《z-index在IE中的利诱》一文中最初提到的成绩：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Keywords"content="z-index,IE,利诱"/><metahttp-equiv="Description"content="这是一个z-index在IE中的利诱的演示"/><metacontent="all"name="robots"/><metaname="author"content="blank,怿飞"/><metaname="copyright"content="http://www.planabc.net"/><title>z-index在IE中的利诱</title><styletype="text/css"media="all">#box1{position:absolute;top:100px;left:210px;width:200px;height:200px;background-color:yellow;z-index:-10;}</style></head><body><divid="box1">为何负值的定位元素在IE和FF下显现纷歧致呢？Why？</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
演示地点：
http://rong179.blogbus.com/files/12163573190.html
以为：
解惑：IE扫瞄器仿佛给body元素默许了一个绝对定位属性（position:relative）。
真是如许吗？
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Keywords"content="z-index,IE,Firefox,stackingcontext,stacklevel"/><metahttp-equiv="Description"content="这是一个在IE中测试层叠级别（stacklevel)的页面"/><metacontent="all"name="robots"/><metaname="author"content="rong179，rong179@yahoo.cn"/><metaname="copyright"content="http://rong179.blogbus.com"/><title>body是不是默许有position属性</title><head><style>*{margin:0;}html{background:silver;}body{height:200px;width:200px;background:green;text-align:right;/*ie中position:relative;加上这条尝尝*//*ff中opacity:0.99;加上这条尝尝*/}div{position:absolute;left:100px;top:100px;width:200px;height:200px;background:yellow;z-index:-1;}</style></head><body>BODY:<br/>z-Index:0<div>DIV:<br/>z-Index:-1</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
演示地点：
http://rong179.blogbus.com/files/12163572440.html
剖析
box1显现在body的下方，依据下面的stacklevel划定规矩，IE中，假如body默许了一个地位属性，即body是其父级stackingcontext，box1应显现在其上方，现实却不是如许。并且当我们给body加上position：relative今后，显现效果和stacklevel划定规矩分歧。以是body并没有默许地位属性。
那为何负值的定位元素在IE和FF下显现纷歧致呢？
ie中依据stacklevel划定规矩：z-index为负的定位元素的stacklevel比父级stackingcontext（此处是rootstackingcontext）高，显现在其上方。故box1在ie中能显现。ff3.0和尺度分歧，也能显现。人人能够试一下。
ff2.0中因为那条特别的stacklevel，即z-index为负的定位元素的stacklevel比父级stackingcontext（此处是rootstackingcontext）低，以是显现在rootstackingcontext下方。故不克不及瞥见。
别的，下面的代码中加上opacity那条后，在ff2.0中便可显现了。这又是甚么缘故原由呢？
推想：在火狐中假如给元素设置opacity属性（1除外），即会发生新的stackingcontext。
下面加上opacity属性后在ff2.0中可显现box1在body下，ff3.0box1在body上，（能够依据下面的stacklevel划定规矩本人剖析）切合推想。
在w3c的申明中也证实这点
InfuturelevelsofCSS,otherpropertiesmay
introducestackingcontexts,forexampleopacity
[CSS3COLOR].
总结：
在一个stackingcontext中元素的z-轴显现按次，由元素所处的stacklevel决意。关于统一stacklevel的定位元素由z-index的巨细进一步决意显现序次。
- ie中给元素设置position属性（static除外）可发生新的stackingcontext
- ff中给元素设置opacity属性（1除外）可发生新的stackingcontext
除此以外（大概设置其他属性也会发生新的stackingcontext，但还不晓得）只要定位元素设置了z-index(auto除外)才会发生新的stackingcontext，子元素将依照新的stackingcontext，定位。
在FF3.0中了局和尺度按次分歧。FF2.0中“z-index值为负值的定位元素”在父级stackingcontext的背景上面。（注重ff2.0的这个特别性）
IE下测试
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metaname="Keywords"content="z-index,IE,Firefox,stackingcontext,stacklevel"/><metahttp-equiv="Description"content="这是一个在IE中测试层叠级别（stacklevel)的页面"/><metacontent="all"name="robots"/><metaname="author"content="rong179，rong179@yahoo.cn"/><metaname="copyright"content="http://rong179.blogbus.com"/><title>stacklevel在IE中的测试</title><styletype="text/css"media="all">#container{position:relative;z-index:0;background:purple;width:400px;}#containerdiv{height:200px;width:200px;}#box-p-zn{position:relative;z-index:-1;background-color:yellow;top:-95px;left:55px;}#box-block{background-color:aliceblue;margin-top:-170px;margin-left:30px;}#box-float{float:left;margin:-50px0px035px;background-color:red;}#box-inline{background-color:gray;display:inline;padding:50px0;margin-left:-10px;}#box-p-za{position:absolute;top:50px;left:50px;background-color:green;}#box-p-zp{position:relative;background-color:greenyellow;z-index:1;}</style></head><body><divid="container"><divid="box-p-zp">这个boxposition:relative;z-index:1;</div><divid="box-p-za">这个boxposition:absolute;z-index:auto;</div><divid="box-float">这个boxfloat</div><divid="box-block"><br/><br/><br/><br/>这个boxblock</div><!--请互换下面两个元素的按次，再尝尝--><divid="box-inline">这个boxinline;</div><divid="box-p-zn"><br/><br/><br/><br/><br/>这个boxz-index:-1;</div><!--调试之用--></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
测试页面：
http://rong179.blogbus.com/files/12163574751.html(请在IE下扫瞄)
代码申明：
此代码也是依据下面的测试头脑，但因为inline元素在ie中的特别性，把inline的代码写在了前面，现实证实结论是准确的。关于“block元素”和“float元素”按次人人能够互换按次测试。
测试结论：
IE下（不管ie6.0大概ie7.0）“float元素”和“block元素”属统一stacklevel，而“inline元素”较其stacklevel低。
注释：
“float元素”，“z-index：auto的定位元素”似乎发生了新的stackingcontext，但其真正能发生新的stackingcontext的儿女任按其父级stackingcontext定位。（但IE中“z-index：auto的定位元素”
会具有z-index值0，发生一个新的stackingcontext，并影响其子元素定位。这是IE一个BUG）
inline元素在FF中似乎能发生新的stackingcontext，而在IE中则不克不及。
至此stacklevel划定规矩内容已终了，如今应当能了解stacklevel和z-index的分歧。stacklevel来决意这一个stackingcontext中各元素在z轴上的显现按次，关于统一stacklevel的定位元素才由z-index进一步决意显现序次。
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:10:46
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜