網(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"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>同輩元素定位方式相同，且無z-index設置時，html靠后者居上 - liehuo.net</title></head><style type="text/css">div { font:12px/1.5 arial;}div strong { color:#fff; background:#036; display:inline-block;}h3 strong { color:#f00;}/*--- 定義方塊外形 ---*/.div1,.div2 {height:70px;width:150px;background:#cff;border:1px solid #036;}.div2 {margin-top:-20px;margin-left:75px;padding-top:30px;height:40px;}td{ height:200px; width:350px; border:solid 1px #C69;}</style><body><h3>法則一:同輩元素各種情況比較<br />公共樣式：<br /><span style="color:#F6C">.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 /></span></h3><table cellpadding="1" cellspacing="0" border="0"><tr><td><div class="div1">.div1{position:static;}</div><div class="div2">.div2{position.static;}</div></td><td><div class="div1" style=" z-index:2;">.div1{position:static; z-index:2;}</div><div class="div2" style=" z-index:1;">.div2{position:static; z-index:1;}</div></td><td>結論：同為靜態定位，html靠后者居上，并且如果有z-index也無效；當然，如果靜態定位遇到動態定位，也肯定是要遜色而居下的。</td></tr><tr><td><div class="div1" style="position:relative;">.div1{position:relative}</div><div class="div2" style="position:relative;">.div2{position:relative}</div></td><td><div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div><div class="div2" style="position:relative; z-index:1">.div2{position:relative; z-index:1}</div></td><td>結論：同為動態relative定位時，如果沒有z-index,則html靠后者居上,如果有z-index,則數值大者居上</td></tr><tr><td><div class="div1" style="position:absolute;">.div1{position.absolute}</div><div class="div2" style="position:absolute;">.div2{position.absolute}</div></td><td><div class="div1" style="position:absolute; z-index:2">.div1{position:absolute; z-index:2}</div><div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div></td><td>結論：同為動態absolute定位時，如果沒有z-index,則html靠后者居上,如果有z-index,則數值大者居上</td></tr><tr><td><div class="div1" style="position:relative;">.div1{position.relative}</div><div class="div2" style="position:absolute;">.div2{position.absolute}</div></td><td><div class="div1" style="position:relative; z-index:2">.div1{position:relative; z-index:2}</div><div class="div2" style="position:absolute; z-index:1">.div2{position:absolute; z-index:1}</div></td><td>結論：同為動態定位時，如果沒有z-index,則html靠后者居上,如果有z-index,則數值大者居上</td></tr><tr><td><div class="div1" style="position:absolute; zoom:1;">.div1{position.absolute}</div><div class="div2" style="position:relative; zoom:1;">.div2{position.relative}</div></td><td><div class="div1" style="position:absolute; z-index:2; zoom:1;">.div1{position:absolute; z-index:2}</div><div class="div2" style="position:relative; z-index:1; zoom:1;">.div2{position:relative; z-index:1}</div></td><td>結論：同為動態定位時，如果沒有z-index,則html靠后者居上,如果有z-index,則數值大者居上</td></tr></table></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>提示：可修改后代碼再運行!
上一篇 如何解決IIS不能發布ASP程序的錯誤？
下一篇 使用clickCatcher在JS文件加載完畢/事件應用之前捕獲Click事件
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
