關(guān)于同輩元素定位方式與z-index的總結(jié)
文章來源：365jz.com 點(diǎn)擊數(shù)：
516 更新時(shí)間：2009-12-20 00:24
參與評(píng)論
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<title>同輩元素定位方式相同，且無z-index設(shè)置時(shí)，html靠后者居上。</title> |
div { font:12px/1.5 arial;} |
div strong { color:#fff; background:#036; display:inline-block;} |
td{ height:200px; width:350px; border:solid 1px #C69;} |
法則一:同輩元素各種情況比較<br />公共樣式：<br /> |
<span style="color:#F6C"> |
border:1px solid #036;<br /> |
<table cellpadding="1" cellspacing="0" border="0"> |
<div class="div1">.div1{position:static;}</div> |
<div class="div2">.div2{position.static;}</div> |
<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>結(jié)論：同為靜態(tài)定位，html靠后者居上，并且如果有z-index也無效；當(dāng)然，如果靜態(tài)定位遇到動(dòng)態(tài)定位，也肯定是要遜色而居下的。</td> |
<div class="div1" style="position:relative;">.div1{position:relative}</div> |
<div class="div2" style="position:relative;">.div2{position:relative}</div> |
<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>結(jié)論：同為動(dòng)態(tài)relative定位時(shí)，如果沒有z-index,則html靠后者居上,如果有z-index,則數(shù)值大者居上</td> |
<div class="div1" style="position:absolute;">.div1{position.absolute}</div> |
<div class="div2" style="position:absolute;">.div2{position.absolute}</div> |
<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>結(jié)論：同為動(dòng)態(tài)absolute定位時(shí)，如果沒有z-index,則html靠后者居上,如果有z-index,則數(shù)值大者居上</td> |
<div class="div1" style="position:relative;">.div1{position.relative}</div> |
<div class="div2" style="position:absolute;">.div2{position.absolute}</div> |
<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>結(jié)論：同為動(dòng)態(tài)定位時(shí)，如果沒有z-index,則html靠后者居上,如果有z-index,則數(shù)值大者居上</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> |
<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>結(jié)論：同為動(dòng)態(tài)定位時(shí)，如果沒有z-index,則html靠后者居上,如果有z-index,則數(shù)值大者居上</td> |
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
------分隔線----------------------------
