CSS中的position屬性——從靜態流中脫穎而出

一、靜態流與position

CSS中的position屬性用於將元素從普通的文檔流中脫離出來，使其可以通過top、right、bottom和left屬性來定位。在理解position之前，我們需要了解什麼是靜態流。

本質上，文檔中的每個元素都可以看做是由塊級元素和行內元素構成的。當一個元素在文檔中被放置時，它會按照特定的規則沿着文檔流流動。這個規則被稱為“靜態流”，也叫“普通流”或“自然流”。

普通流的主要特點是元素會一個接一個地放置，每個元素佔據一行或一行的一部分。塊元素會在頁面中自動換行，行內元素則會在同一行內放置。

而當一個元素被應用了position: absolute;、position: fixed;、position: relative;或position: sticky;屬性時，它就會從普通流中脫離出來，不再跟其他元素遵循普通流的規則排布。

下面是一個簡單的示例：

/* HTML */
<div class="container">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
</div>

/* CSS */
.container {
  width: 500px;
  height: 500px;
}

.box {
  width: 100px;
  height: 100px;
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: blue;
}

默認情況下，box-1和box-2元素會按照普通流的規則排布在容器中：

/* 等價於position: static; */
.box {
    position: relative;
}

如果我們將box-1元素設置為position: absolute;，則它就會從普通流中脫離出來，不再佔據空間。box-2元素會自動頂上去：

.box-1 {
    position: absolute;
}

二、position屬性詳解

1. position: static;

這是默認值，即元素會按照普通流的規則排布。如果你沒有顯式設置position屬性，則元素的position值為static。

2. position: relative;

元素的位置會相對於它原來應該在的位置進行定位。也就是說，它在文檔流中的位置不會改變，不會影響其他元素的位置。

相對定位會創建一個新的定位上下文。這個定位上下文會影響元素內部的絕對定位子元素的位置。後面我們會講到絕對定位。

下面是一個示例，我們將box-1元素向右移動了20px：

.box-1 {
    position: relative;
    left: 20px;
}

3. position: absolute;

這種定位方式會使元素脫離出文檔流，完全不佔據原來的位置，也不會對其他元素造成任何影響。

當一個元素設置為position: absolute;時，它會相對於最近的有定位的祖先元素進行定位（注意是有定位的祖先元素，後面會詳細講到）。如果沒有定位的祖先元素，那麼它的位置會相對於最初的包含塊（即瀏覽器窗口）進行定位。

下面是一個示例，我們將box-1元素相對於container的左上角定位，並且將其z-index設置為1，使其在box-2元素的上層：

.box-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

4. position: fixed;

fixed定位與absolute定位類似，都是相對於最初的包含塊（即瀏覽器窗口）進行定位。不過，它的定位與視窗有關，而不是與文檔流有關。

它的特點是無論用戶如何滾動頁面，元素都會保持相對不動的位置。fixed定位常用來為頁面懸浮的導航條、廣告條等元素固定在頁面上方。

下面是一個示例，我們將box-1元素設置為fixed定位，在視口的右下角定位：

.box-1 {
    position: fixed;
    bottom: 0;
    right: 0;
}

5. position: sticky;

粘性定位是一種混合了相對定位和固定定位的定位方式。元素會在跨越特定閾值前為相對定位，然後在接下來的滾動中為固定定位。

它的特點是能夠在滾動到特定位置時將元素固定在頁面上，不過一旦它們脫離了它們的位置，它們就會重新成為相對定位的元素。

下面是一個示例，我們將box-1元素設置為sticky定位，在滾動到頂部時將其固定在頁面上：

.box-1 {
    position: sticky;
    top: 0;
}

三、定位上下文

所謂“定位上下文”，就是一個對定位元素周圍的區域進行定義和管理的區域。

每個元素都會自己創建一個定位上下文。當元素被設置為position: static（默認值）或position: relative時，它們會成為自己的定位上下文。而當元素被設置為position: absolute、position: fixed或position: sticky時，它們會相對於最近的有定位的祖先元素進行定位。

下面我們來看一個示例，box-1元素被設置為relative定位，同時它的子元素box-1-1元素被設置為absolute定位。因為box-1-1元素是box-1元素的子元素，所以它的“最近的有定位的祖先元素”就是box-1元素。

/* HTML */
<div class="container">
    <div class="box box-1">
        <div class="box box-1-1"></div>
    </div>
</div>

/* CSS */
.box-1 {
    position: relative;
}

.box-1-1 {
    position: absolute;
    top: 0;
}

我們發現，box-1-1元素的位置是相對於box-1元素定位的，而不是相對於container定位的。

四、小結

通過本文的介紹可以看出，position屬性是CSS中非常有用也十分靈活的屬性，它可以讓我們實現各種有趣的效果。對於不同的定位方式，我們需要理解它們的定位特點；而對於定位上下文，我們需要了解有關祖先元素的概念。