烈火网(LieHuo.Net)教程 CSS同辈元素定位方式与z-index的总结，同辈元素定位方式相同，且无z-index设置时，html靠后者居上，请看下面的示例源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /><br /> <title>同辈元素定位方式相同，且无z-index设置时，html靠后者居上 - liehuo.net</title><br /> </head><br /> <style type="text/css"><br /> div { font:12px/1.5 arial;}<br /> div strong { color:#fff; background:#036; display:inline-block;}<br /> h3 strong { color:#f00;}<br /> /*--- 定义方块外形 ---*/<br /> .div1,<br /> .div2 {<br /> height:70px;<br /> width:150px;<br /> background:#cff;<br /> border:1px solid #036;<br /> }<br /> .div2 {<br /> margin-top:-20px;<br /> margin-left:75px;<br /> padding-top:30px;<br /> height:40px;<br /> }<br /> td{ height:200px; width:350px; border:solid 1px #C69;}<br /> </style><br /> <body><br /> <h3><br /> 法则一:同辈元素各种情况比较<br />公共样式：<br /><br /> <span style="color:#F6C"><br /> .div1,<br /><br /> .div2 {<br /><br /> height:70px;<br /><br /> width:150px;<br /><br /> background:#cff;<br /><br /> border:1px solid #036;<br /><br /> }<br /><br /> .div2 {<br /><br /> margin-top:-20px;<br /><br /> margin-left:75px;<br /><br /> padding-top:30px;<br /><br /> height:40px;<br /><br /> }<br /><br /> </span><br /> </h3><br /> <table cellpadding="1" cellspacing="0" border="0"><br /> <tr><br /> <td><br /> <div class="div1">.div1{position:static;}</div><br /> <div class="div2">.div2{position.static;}</div><br /> </td><br /> <td><br /> <div class="div1" style=" z-index:2;">.div1{position:static; z-index:2;}</div><br /> <div class="div2" style=" z-index:1;">.div2{position:static; z-index:1;}</div><br /> </td><br /> <td>结论：同为静态定位，html靠后者居上，并且如果有z-index也无效；当然，如果静态定位遇到动态定位，也肯定是要逊色而居下的。</td><br /> </tr><br /> <tr><br /> <td><br /> <div class="div1" style="position:relative;">.div1{position:relative}</div><br /> <div class="div2" style="position:relative;">.div2{position:relative}</div><br /> </td><br /> <td><br /> <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div><br /> <div class="div2" style="position:relative; z-index:1">.div2{position:relative; z-index:1}</div><br /> </td><br /> <td>结论：同为动态relative定位时，如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td><br /> </tr><br /> <tr><br /> <td><br /> <div class="div1" style="position:absolute;">.div1{position.absolute}</div><br /> <div class="div2" style="position:absolute;">.div2{position.absolute}</div><br /> </td><br /> <td><br /> <div class="div1" style="position:absolute; z-index:2">.div1{position:absolute; z-index:2}</div><br /> <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div><br /> </td><br /> <td>结论：同为动态absolute定位时，如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td><br /> </tr><br /> <tr><br /> <td><br /> <div class="div1" style="position:relative;">.div1{position.relative}</div><br /> <div class="div2" style="position:absolute;">.div2{position.absolute}</div><br /> </td><br /> <td><br /> <div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div><br /> <div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div><br /> </td><br /> <td>结论：同为动态定位时，如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td><br /> </tr><br /> <tr><br /> <td><br /> <div class="div1" style="position:absolute; zoom:1;">.div1{position.absolute}</div><br /> <div class="div2" style="position:relative; zoom:1;">.div2{position.relative}</div><br /> </td><br /> <td><br /> <div class="div1" style="position:absolute; z-index:2; zoom:1;">.div1{position:absolute; z-index:2}</div><br /> <div class="div2" style="position:relative; z-index:1; zoom:1;">.div2{position:relative; z-index:1}</div><br /> </td><br /> <td>结论：同为动态定位时，如果没有z-index,则html靠后者居上,如果有z-index,则数值大者居上</td><br /> </tr><br /> </table><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 CSS3:nth-child()伪类选择器多浏览器兼容性问题及解决方案之CSS篇
