您的位置：首页 > 其它

关于同辈元素定位方式与z-index的总结

2009-12-18 11:41 363 查看 

<!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=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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航