CSS絕對定位

技術小阿哥發表於2017-11-27
CSS
當容器的position屬性值為absolute時，這個容器即被絕對定位了。使用絕對定位的容器，會脫離文件流。
當有多個絕對定位容器放在同一個位置時，顯示哪個容器的內容呢？類似Photoshop的圖層有上下關係，絕對定位的容器也有上下的關係，在同一個位置只會顯示最上面的容器。在計算機顯示中把垂直於顯示螢幕平面的方向稱為z方向，CSS絕對定位的容器的z-index屬性對應這個方向，z-index屬性的值越大，容器越靠上。即同一個位置上的2個絕對定位的容器只會顯示z-index屬性值較大的。
如果容器設定了絕對定位，但是其父容器沒有設定position 屬性，絕對定位的容器會一直往上查詢，直到找到具有position屬性的容器。如果沒有設定不到定位的父親容器，以瀏覽器視窗為定位參考點。

<!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=gb2312″ /> 

<title>無標題文件</title> 

<style type=”text/css”> 


*{margin: 0px; 


    padding:0px;} 

body{ 

margin:20px; 

} 

#all{height:1200px; 

         width:500px; 

  /* position:absolute;*/ 

         margin-left:20px; 

    margin:20px; 

         background-color:#eee;} 


#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px; 


             height:50px; 


             border:5px double #000;            


             position:absolute;} 


#fixed1{top:0px; 


             left:0px; 


             background-color:#9c9;} 


#fixed2{top:20px; 


             left:50px; 


             background-color:#9cc;} 


#fixed3{bottom:10px; 


             left:50px; 


             background-color:#9cc;} 


#fixed4{top:10px; 


             right:50px; 


             z-index:10; 


             background-color:#9cc;} 


#fixed5{top:20px; 


             right:90px; 


             z-index:15; 


             background-color:#9c9;} 


#a,#b,#c{width:300px; 


            height:100px; 


            border:1px solid #000; 


            background-color:#ccc;} 

</style></head> 

<body> 

<div id=”all” align=”center”>        


     <div id=”fixed1″>第1個固定的div容器</div> 


     <div id=”fixed2″>第2個固定的div容器</div> 


     <div id=”fixed3″>第3個固定的div容器</div> 


     <div id=”fixed4″>第4個固定的div容器</div> 


     <div id=”fixed5″>第5個固定的div容器</div> 


     <div id=”a”>第1個無定位的div容器</div> 


     <div id=”b”>第2個無定位的div容器</div> 


     <div id=”c”>第3個無定位的div容器</div> 

</div> 

</body> 

</html>    
 
 
然後，我在all 的css中設定了postition 屬性，這樣子容器，就乖乖的放在all div 下了。效果如下：
 
本文轉自 randy_shandong 51CTO部落格，原文連結：http://blog.51cto.com/dba10g/224975，如需轉載請自行聯絡原作者


相關文章