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. staticposition的默認值，通常不設置position屬性時，會按照正常的文檔流進行排列。