首頁 >web前端 >css教學 >css：position定位屬性及實例應用總結

css：position定位屬性及實例應用總結

伊谢尔伦原創: 2017-06-06 11:14:393006瀏覽

position定位屬性

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

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

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

#2. 觀看《彈指間學會CSS影片教學》中CSS定位影片教學

position定位相關應用程式

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

絕對定位會徹底從文件流中拿出來，在元素之前佔據的空間也被回收啦。絕對定位元素的定位依賴於其定位上下文。
要注意的是：這裡寫過絕對定位可以將行內元素變成區塊級元素的表現形式。但確定就是一旦將行內元素進行絕對定位後，該元素的位置不好掌握，（原因：如果該元素沒有設定內外邊距，且前後左右也沒有絕對定位元素，那麼該元素會暫時停留在自己原來的位置，但是如果該元素設定了外邊距，那麼該元素會暫時停留在距原來位置一個外邊距的距離。絕對定位的元素下面。

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;的相容問題