关于同辈元素定位方式与z-index的总结
文章来源：365jz.com 点击数：507 更新时间：2009-12-20 00:24 参与评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> |
<html xmlns=""> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<title>同辈元素定位方式相同，且无z-index设置时，html靠后者居上。</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> |
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
- 上一篇：有利于SEO的DIV+CSS的命名规则
- 下一篇：PHP魔法函数应用详解
