元素层叠级别及z-index剖析

2008-07-25 10:15:15　css,元素,z-index,叠级别 DesignTimes网页教程　网友评论条

测试

FF下测试

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /><meta http-equiv="Description" content="这是一个在火狐中测试层叠级别（stack level)的页面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>stack level 在火狐中的测试</title><style type="text/css" media="all">#container {position:relative;left:100px;z-index:0;background: purple;width:500px;}#container div {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:-50px 100px 0 0;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;}#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><div [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></p><p><span><strong>测试页面</strong>：<br></span><span>http://rong179.blogbus.com/files/12163574750.html（请分别在FF3.0和FF2.0中打开）</span></p><p><span></span><span><strong>代码说明</strong>：</span></p><p><span></span><span>由前所述，如果元素的stack level同级则后来居上；元素的stack level高，这无论代码在文档中位置如何都显示在上面，即使代码在最前面；如果元素的stack level低，无论代码位置如何都将显示在下面，即使代码在最后面。</span></p><p><span>我们就根据这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，如果我把“float元素” 的代码写在“block元素”的前面，且实际显示为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。因为如果同级,或者“block元素”的stack level高都应是“block元素”显示在上。</span></p><p><span>根据以上，根据标准中的顺序，把stack level高的元素代码写在前面，stack level低的代码写在后面，如果显示结果是：代码在前面的元素显示在上方，即证明上面的stack level规则。</span></p><p><span><strong>测试结果</strong>：</p><p>在FF3.0中结果和标准顺序一致。FF2.0中“z-index值为负值的定位元素”在父级stacking context的背景下面。（注意ff2.0的这个特殊性）</p><p><strong>IE下测试</strong></p><p>运行代码框<br><span><textarea class="codeTextarea"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Keywords" content="z-index,IE,Firefox,stacking context,stack level" /><meta http-equiv="Description" content="这是一个在IE中测试层叠级别（stack level)的页面" /><meta content="all" name="robots" /><meta name="author" content="rong179，rong179@yahoo.cn" /><meta name="copyright" content="http://rong179.blogbus.com" /><title>stack level 在IE中的测试</title><style type="text/css" media="all">#container {position:relative;z-index:0;background: purple;width:400px;}#container div {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:-50px 0px 0 35px;background-color: red;}#box-inline {background-color: gray;display:inline;padding:50px 0;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><div [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></p><p><span><strong>测试页面</strong>：<br></span><span>http://rong179.blogbus.com/files/12163574751.html(请在IE下浏览)</span></p><p><span></span><span><strong>代码说明</strong>：</span></p><p><span></span><span>此代码也是根据上面的测试思想，但由于inline元素在ie中的特殊性，把inline的代码写在了后面，事实证明结论是正确的。对于“block元素”和“float元素”顺序大家可以交换顺序测试。</span></p><p><span><strong>测试结论</strong>：</span></p><p><span></span><span>IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。</span></p><p><span><strong>解释</strong>：</span></p><p><span></span><span>“float元素”，“z-index：auto的定位元素”仿佛产生了新的stacking context，但其真正能产生新的stacking context的后代任按其父级stacking context定位。（但IE中“z-index：auto的定位元素”<br>会拥有z-index值0，产生一个新的stacking context，并影响其子元素定位。这是IE一个BUG）<br>inline元素在FF中仿佛能产生新的stacking context，而在IE中则不能。</span></p><p><span></span><span>至此stack level规则内容已经完毕，现在应该能理解stack level和z-index的不同。stack level来决定这一个stacking context中各元素在z轴上的显示顺序，对于同一stack level的定位元素才由z-index进一步决定显示次序。</span></p></span> <ul class="digg"> <li class="digg-count" id="diggnum"><strong><script type="text/javascript" src="http://www.designtimes.com.cn/e/public/ViewClick?classid=28&id=3068&down=5"></script></strong></li> <li class="digg-it"><a href="http://www.designtimes.com.cn/e/public/digg?classid=28&id=3068&dotop=1">我顶</a></li> </ul> <p align="center"><script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></p> <p align="center" class="3068 pageLink"><div class="epages"><a title="Page"> <b>2</b>/<b>3</b> </a> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068.shtml" title="首页">|‹</a> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068.shtml" title="上一页">‹‹</a> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068.shtml">1</a> <b>2</b> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068_3.shtml">3</a> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068_3.shtml" title="下一页">››</a> <a href="http://edu.designtimes.com.cn/web/200807/12169526933068_3.shtml" title="尾页">›|</a></div></p> <div class="tools">【<a href="http://www.designtimes.com.cn/e/public/digg?classid=28&id=3068&dotop=1">顶一下</a>】【<a href="http://www.designtimes.com.cn/e/DownSys/report?classid=28id&id=3068" target="_blank">错误报告</a>】【<a href=# onClick="window.external.addFavorite('http://edu.designtimes.com.cn/web/200807/12169526933068.shtml','元素层叠级别及z-index剖析 - DesignTimes')" title="把《元素层叠级别及z-index剖析》收藏夹">加入收藏</a>】【<a href="http://www.designtimes.com.cn/sitemap/" target="_blank">RSS订阅</a>】【<a href="http://www.designtimes.com.cn/e/pl/?classid=28&id=3068" target="_blank">查看评论(<span><script type="text/javascript" src="http://www.designtimes.com.cn/e/public/ViewClick?classid=28&id=3068&down=2"></script></span>)</a>】</div> </div> <ul class="navigation"> <li class="prv">上一篇：<a href='http://edu.designtimes.com.cn/web/200807/12169526933067.shtml'>曹鹏 CSS 视频教程</a></li> <li class="next">下一篇：<a href='http://edu.designtimes.com.cn/web/200807/12169527243069.shtml'>十步学会用css建站(全)</a></li> </ul> <div id="googleSearch"> <div><strong>TAGS：</strong><a href='http://www.designtimes.com.cn/e/search/?searchget=1&tbname=news&tempid=1&show=keyboard&keyboard=元素' target='_blank'>元素</a> </div> </div> <div id="comment-body"><a name="post" id="comment-post"></a> <form action="http://www.designtimes.com.cn/e/enews/index.php" method="post" name="saypl" id="saypl"> <input id="id" type="hidden" name="id" value="3068" /> <input id="classid" type="hidden" name="classid" value="28" /> <input id="enews" type="hidden" name="enews" value="AddPl" /> <input id="repid" type="hidden" value="0" name="repid" /> <textarea id="saytext" name="saytext" title="不能为空!">

昵称：验证码：