CSS定位中的必須深究的常用技法

[css] view plain copy  print?

1. <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">   </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">關於CSS定位，有人很多時候都是隨便用用，符合自己的要求就行。但是CSS中的position等屬性確實有很多需要認真考究的地方。</span>  

 

1.position:static

static屬性是position的默認值，也就是說，當一個元素沒有爲其設定position屬性時，它的默認值就是static。

2.position:absolute

這是一個經常會被用到的position屬性值。如果爲某個元素設定了absolute，則該元素脫離原來的文檔流。形象一些說，比如a元素被定義了position:absolute，那麼這個元素就不會與這個頁面中的其他元素髮生位置上的關係，而是凌駕於整個頁面之上的漂浮狀態。頁面中的其他元素的位置變化、大小變化等，都不會影響a元素的位置，相當於一個局外人。

3.position:relative

relative是最有用的定義方法。設置了relative屬性表示，該元素相對於自己原來位置發生的變化。比如，我們定義了一個b元素，給它設定如下css樣式：

 

[css] view plain copy  print?

1. #b{  
2.     position: relative;  
3.     width:100px;  
4.     height:100px;  
5.     top:100px;  
6. }  

該段代碼定義的b元素，它的位置爲相對於沒有定義position屬性的位置向下移動100px的距離。relative屬性值的定義就是這樣的定位模式。

 

4.position:fixed

fixed定位用的不多，但是它非常適用於固定模式的部分製作，比如頂部菜單。定義了fixed屬性後，元素的位置不會隨着任何行爲發生變化。

5.relative+position

同時使用這兩個定位，是一種很常用的手法，新手也可能會在此處遇見很多麻煩。總體來說，如果一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，如果有設置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html爲止。比如，下面的代碼利用二者的結合實現了一個兩列布局;

 

[css] view plain copy  print?

1. <span style="white-space:pre">    </span>#div-1 {  
2.              position:relative;  
3.             }  
4.             #div-1a {  
5.              position:absolute;  
6.              top:0;  
7.              right:0;  
8.              width:200px;  
9.             }  
10.             #div-1b {  
11.              position:absolute;  
12.              top:0;  
13.              left:0;  
14.              width:200px;  
15.             }  

內部的兩個子div會根據其外部定位爲relative的元素爲參照進行絕對定位。

 

6.clear:both清除浮動

有的時候定位會出現塌陷現象，即子元素在父元素中，但是父元素的大小不會隨着子元素的大小而被“”撐開“，導致了父元素的塌陷效果。這種bug的出現是由於子元素設定了 float屬性，導致父元素的坍塌。要想解決這種bug，需要爲父元素設定清除浮動。示例代碼如下：

 

[css] view plain copy  print?

1. <span style="white-space:pre">    </span>    #div-1a {  
2.              float:left;  
3.              width:190px;  
4.             }  
5.             #div-1b {  
6.              float:left;  
7.              width:190px;  
8.             }  
9.             #div-1c {  
10.              clear:both;  
11.             }  
12.