CSS深入研究:Position詳解

position有四個屬性值：

1. relative
2. absolute
3. fixed
4. static

下面分別講述這四個屬性。

1. relative

relative屬性，相對定位，我們要搞清它是相對哪個對象來進行位移的。答案是它本身的位置。relative的位移是基於對象的margin的左上側的。但是這貨又比margin更為強大，如果單獨使用這個屬性的時候，一般情況下，你可以把這貨看成是全能的margin，因為它可以在display:inline的時候起作用，這點上margin值的上下邊距就不起作用了，當然margin負值的某些應用用這個屬性就實現不了了。比如，子級的margin負值可以減小display:inline-block父級的寬度，從而實作類別似圓角的自適應按鈕。

 

 

 

而這個時候relative就無法替代margin了。所以說它一般的單獨使用的時候是更強大的margin，當然這個貨有其他組合的應用。

2. absolute

這個屬性是一個強大的魔鬼。當設定元素的屬性為absolute時，這個元素就飄起來了。脫離了文檔流，尼瑪呀，又是這貨，看到”文檔流“，我猜大部分人都不是很明白這詭異的東西，那麼下面，我就來點乾貨，解釋下文檔流，已經瞭然於胸的大神請略過這段。

文檔流（普通流）：

將表單自上而下分成一行行，並在每一行中按從左至右的順序排放元素，即為文檔流。

有三種情況將使得元素脫離文檔流，分別是浮動(float left or right)、絕對位置(position:absolute)、固定定位(position:fixed)。其中浮動引起的脫離文檔流和定位引起的表現上又有所不同。關於這點不同，那就有待讀者自行碼demo了。

當元素的position設定為absolute後，元素將怎樣進行位移呢？這裡分為兩種情況：

(1) 當元素的父級(也可以是爺爺，或者是爺爺的爺爺)設定了position屬性，且position的屬性值為absolute或者relative時，這個時候，元素將按照這個父級來進行定位。
對象雖然確定好了，但有些地方需要思考，如果父級設定了
margin，border，padding等屬性，那麼這個錨點將從哪裡開始呢？答案是從padding開始

(2) 如果元素的父級不存在一個有著position屬性值為absolute或者relative的對象時，那麼那就會以body為定位對象，這個比較容易理解。

3. fixed

fixed是相對於可視地區進行位移的，不管你是不是拖動瀏覽器的捲軸，不管它的父級是誰，是天王老子，它都不會鳥你，如果不明白，請自行碼demo，哦，one more thing：IE6這傢伙是不支援的。如果要事先IE6 fixed的效果，可以用css運算式來解決這個問題。

4. static

position的預設值，一般不設定position屬性時，會按照正常的文檔流進行排列。

最後是廢話：原創文章，如有不對，請指正，如對您有協助，請狠狠的點擊 [頂]

position有四個屬性值：

1. relative
2. absolute
3. fixed
4. static

下面分別講述這四個屬性。

1. relative

relative屬性，相對定位，我們要搞清它是相對哪個對象來進行位移的。答案是它本身的位置。relative的位移是基於對象的margin的左上側的。但是這貨又比margin更為強大，如果單獨使用這個屬性的時候，一般情況下，你可以把這貨看成是全能的margin，因為它可以在display:inline的時候起作用，這點上margin值的上下邊距就不起作用了，當然margin負值的某些應用用這個屬性就實現不了了。比如，子級的margin負值可以減小display:inline-block父級的寬度，從而實作類別似圓角的自適應按鈕。

 

 

 

而這個時候relative就無法替代margin了。所以說它一般的單獨使用的時候是更強大的margin，當然這個貨有其他組合的應用。

2. absolute

這個屬性是一個強大的魔鬼。當設定元素的屬性為absolute時，這個元素就飄起來了。脫離了文檔流，尼瑪呀，又是這貨，看到”文檔流“，我猜大部分人都不是很明白這詭異的東西，那麼下面，我就來點乾貨，解釋下文檔流，已經瞭然於胸的大神請略過這段。

文檔流（普通流）：

將表單自上而下分成一行行，並在每一行中按從左至右的順序排放元素，即為文檔流。

有三種情況將使得元素脫離文檔流，分別是浮動(float left or right)、絕對位置(position:absolute)、固定定位(position:fixed)。其中浮動引起的脫離文檔流和定位引起的表現上又有所不同。關於這點不同，那就有待讀者自行碼demo了。

當元素的position設定為absolute後，元素將怎樣進行位移呢？這裡分為兩種情況：

(1) 當元素的父級(也可以是爺爺，或者是爺爺的爺爺)設定了position屬性，且position的屬性值為absolute或者relative時，這個時候，元素將按照這個父級來進行定位。
對象雖然確定好了，但有些地方需要思考，如果父級設定了
margin，border，padding等屬性，那麼這個錨點將從哪裡開始呢？答案是從padding開始

(2) 如果元素的父級不存在一個有著position屬性值為absolute或者relative的對象時，那麼那就會以body為定位對象，這個比較容易理解。

3. fixed

fixed是相對於可視地區進行位移的，不管你是不是拖動瀏覽器的捲軸，不管它的父級是誰，是天王老子，它都不會鳥你，如果不明白，請自行碼demo，哦，one more thing：IE6這傢伙是不支援的。如果要事先IE6 fixed的效果，可以用css運算式來解決這個問題。

4. static

position的預設值，一般不設定position屬性時，會按照正常的文檔流進行排列。

最後是廢話：原創文章，如有不對，請指正，如對您有協助，請狠狠的點擊 [頂]