CSS的四種定位方式詳解

在CSS中定位使用position屬性來設置，有以下4種取值：

1. 靜態定位 - static
2. 相對定位 - relative
3. 絕對定位 - absolute
4. 固定定位 - fixed

---

 

本文舉例所用的材料

三個不同顏色的元素，都設置了同樣的大小和左浮動。

本文的例子主要操作B元素。

---

 

靜態定位 - static

靜態定位是css中的默認定位方式，也就是沒有定位，處於正常文檔流中。

將B元素設置為靜態定位，並設置top和left屬性為10px

.B {
    position: static;
    top: 10px;
    left: 10px;
}

效果圖如下： 

看到B元素沒有任何反應，因為默認就是靜態定位，在此定位方式中設置：top，bottom，left，right，z-index 這些屬性都是無效的。

---

 

相對定位 - relative

相對定位的相對很有意思，只要搞清楚相對於誰就能理解相對定位的含義。

請看下面的栗子，將B元素設置為相對定位，top和left屬性都為0

.B {
    position: relative;
    top: 0;
    left: 0;
}

效果如下：

B元素沒有反應，這是因為相對定位是相對於自身定位，top和left為0就相當於原位不動。

再看一個例子，將top和left屬性值改為10px

可以看到B元素偏移了10px，並且C元素(藍色)並沒有浮到A元素旁邊，而是被無形的東西擋住了。

相對定位的特點就是元素本身在文檔流中的占位不變，無形的東西就是B元素在文檔流中的占位，這也是為什么C元素不會浮動過去的原因。可以想象成B元素的本體依然處於普通文檔流中，它的替身在參照本體進行移動。(本體和替身是為了比喻，並不是官方說法)

為了更好理解相對於自身定位，請看下圖：

黑點表示B元素本體的左上角，綠色的是它的替身，可以看出替身是參照B元素本體的左上角那個點進行偏移。(本體就是透明的占位的部分)

再將B元素寬度增加，效果如下：

 

可以更明顯的看出B元素在普通文檔流中占位的痕跡。

---

 

絕對定位 - absolute

我在剛開始學習的時候一度被絕對這個詞所誤導，以為絕對定位是想去哪就去哪。

實際上絕對定位是參考父元素的相對定位來實現的，聽起來不好理解，我們先做個最簡單的例子。

設置B元素為絕對定位，top和left屬性為0

.B {
    position: absolute;
    top: 0;
    left: 0;
}

效果如下：

可以看到元素B被定位到了頁面的左上角，並且元素B脫離了普通文檔流(元素C浮到元素A旁邊，沒有占位)

那么我們可以認為絕對定位是參照頁面左上角進行定位嗎？答案是不可以，絕對定位並不是參照頁面進行定位，而是參照父元素的relative進行定位，如果元素的所有父元素都沒有設置relative，那么將參照根元素html進行定位，這就是B元素跑到了頁面左上角的原因。

根據上述說法，假如將B元素設置為relative，再增加一個元素D作為子元素，設置D元素進行絕對定位是不是就會參照父元素B了呢？

我們可以嘗試一下：在B元素里加入一個子元素D，並設置B元素為相對定位，D元素為絕對定位。(B與D是父子關系)

/* 父元素 */
.B {
    position: relative;
    top: 0;
    left: 0;
}

/* 子元素 */
.D {
    position: absolute;
    top: 10px;
    left: 10px;
}

 

效果如下：

可以看出我們的結論是對的，紫色的元素D確實是參照父元素B左上角的點進行偏移的。

如果取消B元素的相對定位，那么元素D會跑到頁面左上角，也就是參照html元素進行偏移。

我們看看猜測是否正確：取消B元素的相對定位，D元素不變

/* 父元素 */
.B {
    
}

/* 子元素 */
.D {
    position: absolute;
    top: 10px;
    left: 10px;
}

 

效果如下：

答案是正確的，因為元素D的所有父元素都沒有設置relative，所以會參照根元素html進行偏移。

---

 

固定定位 - fixed

固定定位比較簡單，固定定位是參照瀏覽器窗口的左上角進行偏移。

一個簡單例子：設置元素B為固定定位，top和left為50%

.B {
    position: fixed;
    top: 50%;
    left: 50%;
}

 

效果如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

固定定位的特點就是：無論如何滑動頁面，固定定位的元素位置都不會被改變，完全脫離文檔流。

比如CSDN編輯頁面的這個：

可以看到滾動條快到底了，元素位置依然不變。

小知識：css中的定位的偏移量都是通過參照元素與被參照元素的左上角的點進行偏移，所以50%的偏移量並不是真正意義上的居中，還要減去自身寬度或高度的一半。

---

 

z-index屬性

z-index屬性是設置元素的層級，數值低的會被數值高的遮住，舉個栗子：

/* 紅色元素 */
.A {
    position: fixed;
    top: 20px;
    left: 20px;

    z-index: 3;
}

/* 綠色元素 */
.B {
    position: fixed;
    top: 40px;
    left: 40px;


    z-index: 2;
}

/* 藍色元素 */
.C {
    position: fixed;
    top: 60px;
    left: 60px;


    z-index: 1;
}

 

效果如下：

可以看到A元素的z-index值最大，所以顯示在最前面。B元素(綠色)數值在兩者之間，顯示夾在中間。C元素(藍色)數值最小，顯示在最后被遮住。

---

 

PS：我是第一次寫博客文章，文筆不好還請見諒。如有錯誤，歡迎在評論區指出！