css：position定位屬性及執行個體應用總結

position定位屬性

css中position是一個非常的重要的屬性，它有absolute（絕對位置）、relative（相對定位）、static（靜態定位，預設值）、fixed（固定定位）四種。通過position屬性，我們可以讓元素相對於其正常位置，父元素或者瀏覽器視窗進行位移。postion也是初學者容易搞不清楚狀況的一個屬性。目前幾乎所有主流的瀏覽器都支援position屬性，下面的文章我們就來說說css中position定位屬性和其應用。

可以先學習php中文網相關的免費課程

1. 學習《HTML+CSS基礎入門教程》中的 CSS基礎教程之定位 章節

2. 觀看《彈指間學會CSS視頻教程》中 CSS定位 視頻教程

position定位相關應用

1. 深入瞭解css中的position屬性

絕對位置會徹底從文檔流中拿出來，元素之前佔據的空間也被回收啦。絕對位置元素的定位依靠其定位上下文。
需要注意的是：這裡寫過絕對位置可以將行內元素變為區塊層級元素的表現形式。但是確定就是一旦將行內元素進行絕對位置後，該元素的位置不好掌握，（原因：如果該元素沒有設定內外邊距，且前後左右也沒有絕對位置元素，那麼該元素會暫時停留在自己原來的位置，但是如果該元素設定了外邊距，那麼該元素會暫時停留在距原來位置一個外邊距的距離。如果他前後左右都是設定了絕對位置的元素，那麼該元素會尋找最上面一個不是絕對位置的元素下面。<有沒有後悔聽原因啦>）所以，一點那設定了絕對位置需要馬上為該元素進行top、left定位。

2. 解析css的position裡的relative和absolute的區別

position有以下屬性：static、inherit、fixed、absolute、relative
前三個好理解好區分：
static：是預設狀態，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
nherit：從父元素繼承 position 屬性的值。
fixed：產生絕對位置的元素，相對於瀏覽器視窗進行定位。（即滾動瀏覽器的時候，元素永遠固定顯示在視窗可視區的某個位置）。

3. CSS定位position使用介紹

absolute和fixed特點：

a、區塊層級元素的寬度在未定義時不再為100%，而是根據內容自動調整

b、在不定義z-index的情況下，absoulte元素會覆蓋在其他元素上。

c、它會脫離正常的文檔流，不再佔據空間，類似於浮動後的效果

absolute是相對上一個不為static的父元素進行絕對位置。如果不指定父元素的position，absolute將相對於整個html文檔進行絕對位置。

4.使用CSS中position屬性的定位方法說明

一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個屬性，你需要先為它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed，position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素會繼承父元素的 position 值。

5. css中position定位的四種方法總結

脫離標準文檔流

　　特點：（1）如果這個元素沒有父元素，那麼將來top、left、right、bottom是相對於瀏覽器視窗來定位的

　　　　　（2）如果絕對位置的元素有父元素，但父元素沒有相對定位，那麼這個時候top、left、right、bottom還是相對於瀏覽視窗來定位的

　　　　　（3）如果絕對位置的元素有父元素，而且父元素有定位（非static），那麼這個絕對位置的元素位移是以自己的父元素為基礎

　　　　　（4）絕對位置之後的元素在頁面上不會佔據位置

6. CSS的position定位和float浮動

a.假如有一個預設100%寬度的p,一旦加上absolute絕對位置，該元素立馬inline-block化，預設寬度就會自適應元素內部寬度，會導致頁面的寬高塌陷。

b.由於absolute絕對位置的靈活性，對於普通的頁面配置，有時出於省事的原因很容易造成absolute/relative/top/left/z-index的濫用,這樣會使後期的擴充和維護造成麻煩

相關問答

1. 不用position：absolute怎麼實作類別似的功能

2. 移動端position:fixed;的相容問題

3. css部分position fixed web網頁問題 純css做的下拉

4. div設定了position: fixed屬性後如何可以做到隨瀏覽器左右移動？

【相關推薦】

1. php中文網免費教程：《CSS 0基礎入門教程》

2. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》