• 一、定位屬性簡介
• 二、各屬性值的具體功能
  • 1. relative
  • 2. absolute
  • 3. fixed
• 三、三種定位屬性的效果總結

一、定位屬性簡介

position屬性是用於指定一個元素的定位方法型別的屬性，它的取值有：static（預設型別）、relative、absolute、fixed。當position屬性的值不為static（即不為預設）時，我們可以新增：top、bottom、left和right屬性對當前元素進行具體的定位，並且可以使用z-index來設定層級的上下關係。

二、各屬性值的具體功能

1. relative

首先先搭建出測試框架：

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

對應的css：

div {
    width: 200px;
    height: 200px;
}
#box1 {
    background: #df637a;
}
#box2 {
    background: #6ad281;
}
#box3 {
    background: #72d0f6;
}

當前的效果為：

此時我們將#box2（綠色div）的position

#box2 {
    ...
    position: relative;
    top: 200px;
    left: 200px;
}

此時的效果為：

可以發現，當定位屬性值為relative時，元素髮生偏移的參考點為該元素自身。此外雖然元素移動到了新的位置，但是元素仍然會佔有原有的位置，這也是為什麼藍色div沒有排到上面。

2. absolute

我們的測試框架仍與上面相同，初始的效果如下：

此時為#box2開啟絕對定位（position: absolute）：

#box2 {
    background: #6ad281;
    /*使用絕對定位*/
    position: absolute;
}
 

效果如下：

可以發現藍色div不見了，此時檢查元素：

可以發現原來藍色方塊還在，只是放置到了綠色方塊的下面。這是因為當元素啟用絕對定位是，該元素就和浮動類似，不會佔用原有的空間了，因此後面藍色的方塊就會排列在了紅色方塊的下面。

此時我們再設定對應的偏移：

#box2 {
    ...
    /*移動元素位置*/
    top: 200px;
    left: 200px;
}

效果如下：

可以發現此時綠色方塊偏移的參照點為瀏覽器的（0,0）點，也可以理解為body元素的最左上角。

但absolute定位並不是什麼情況下參照點都為瀏覽器的（0,0）點的，先編寫以下場景：

<div id="box1"></div>
<div id="box2">
    <div id="father">
        <div id="son"></div>
    </div>
</div>
<div id="box3"></div>

新增css：

#box2 {
    width: 300px;
    height: 300px;
    background: #6ad281;
}
#father {
    width: 200px;
    height: 200px;
    background-color: plum;
}
#son {
    width: 100px;
    height: 100px;
    background-color: pink;
}

當前效果：

此時為son新增absolute定位，並且設定一定的偏移量：

#son {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    top: 100px;
    left: 100px;
}

顯然，它當前的參照點還是瀏覽器頁面的（0,0）點。

此時為#father元素也新增一個定位（除了static的定位都可以）：

#father {
    ...
    position: relative;
}

此時可以發現#son元素的參考點變成#father元素了。

因此，當使用absolute定位時，元素的參考點為：該元素向外層尋找最近的有新增定位的父級元素：

1. 找到了則參考點為該父級元素的左上角
2. 否則參考點設定為body元素的左上角（即瀏覽器頁面的(0,0)點）。

3. fixed

當設定了fixed後元素將固定在視窗的一個位置，即相對整個視窗的位置不再發生變化。

具體例子：

<div id="big">
    <div id="left-bar">側邊條</div>
</div>

#big {
    height: 2000px;
    background-color: pink;
}
#left-bar {
    height: 300px;
    width: 100px;
    background-color: plum;

    position: fixed;
    top: 200px;
    right: 0;
}

測試效果：

此時無論如何拖動頁面，這個側邊條依然會保持在視窗的左邊不動，因此使用這個定位可以製作懸停效果。

三、三種定位屬性的效果總結

tips：只有添加了定位的元素中新增top、bottom、left、right和z-index這些定位屬性才會生效。