CSS 之 Position 屬性

時間 2019-11-09

標籤 css position 屬性欄目 CSS 简体版

原文原文鏈接

CSS 參考手冊對 position 屬性作了說明：css

static：對象遵循常規流。此時4個定位偏移屬性不會被應用。html

relative：對象遵循常規流，而且參照自身在常規流中的位置經過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。佈局

absolute：對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。post

fixed：與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。spa

針對上面的說明，我們下面經過幾個例子加以解釋，不過你的首先理解 常規流 是什麼？ 常規流也被叫作 文檔流 ， 常規流 指的是元素按照其在 HTML 中的位置順序決定排布的過程，主要的形式是自上而下，一行接一行，每一行從左至右。就像搭積木同樣，一成一成，積木從下往上（常規流從上往下），那 脫離常規流 也就好理解了，就是積木塊不佔據原來的位置了。code

下面例子的 html 佈局：htm

<div class="div">

    <div class="d1">

    </div>
    <div class="d2">

    </div>
    <div class="d3">

    </div>

</div>

默認 css 樣式：對象

.div{
    border: 2px solid darkgrey;
    width:400px;
    height: 400px;
    margin-top: 50px;
}
div{
    width: 100px;
    height: 100px;
    border: 1px solid darkgreen;
}

靜態定位(static) ：
static，無特殊定位，它是html元素默認的定位方式，4個定位偏移屬性不會被應用。及對它設置 top，right，bottom，left 無效。blog

相對定位(relative) ：
relative 屬性遵循常規流,也就設置 relative 屬性不會使它脫離文檔流。
如給第一個盒子添加 relative ：ip

.d1{
    border: 1px solid red;
    position: relative;
    top: 20px;
    left: 20px;
}

能夠看出下面的盒子還在原來的位置，而第一個盒子也佔據這原來的位置(虛線的地方),而且 top 和 left 定位是相對於父容器的。

好了知道了這一效果，那我們在給第一個盒子加上 margin / padding ，會有什麼變化呢？

.d1{
    border: 1px solid red;
    position: relative;
    margin:10px;
    padding: 10px;
    top: 20px;
    left: 20px;

}

能夠看出，第一個盒子在添加 margin 屬性後，盒子偏離了父容器 10px ，加上以前的 top，就是 30px，而 padding 屬性會使盒子撐開了 10px ，下面的其餘盒子 d二、d3的位置也受到了影響，往下偏移了 40px ！！爲何是40px 呢，能夠看圖中藍色實線部分，假設盒子 d1 沒有 relative 的話，那麼當 margin:10px; padding: 10px; 後，整個盒子是否是呈現 藍色實線的狀態， margin 會使 d1盒子上下增長 10px，padding 會使 d1 盒子內容上下撐開10px，合計 d1盒子偏離了40px。

而形成這樣的緣由就是 relative 屬性遵循常規流，並無脫離文檔流，因此 margin和padding 是會影響
先後元素的位置的。

絕對定位(absoulte) ：
absolute：對象脫離常規流。
給盒子添加屬性：

.d1{
    border: 1px solid red;
    position: absolute;
    top: 20px;
    left: 20px;
}

嗯？ d1盒子怎麼跑到了父容器的外面，並且 d二、d3 盒子的位置也受到了影響，往上移動了一個d1的高度。
原來我沒有給父容器添加一個 position:屬性 ，這也引出了 absolute 的一個規則：

使用absoult定位的元素脫離文檔流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，
舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，必定要是直系祖先纔算），直到<html>標籤爲止。

因此這樣：

.div{
    border: 2px solid darkgrey;
    width:400px;
    height: 400px;
    margin-top: 50px;
    position: relative;
}
.d1{
    border: 1px solid red;
    position: absolute;
    top: 20px;
    left: 20px;
}

這就是盒子脫離文檔流的現象，脫離了文檔流，那麼就再也不佔據原來的位置了，後面的元素就會頂上去，補充空白位置！

那一樣的，當盒子添加 absolute 屬性，再添加 margin / padding ，會有什麼變化呢？

.d1{
    border: 1px solid red;
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 20px;
    left: 20px;
}

能夠看出首先 d二、d3 盒子是不受影響的，而 d1盒子 margin: 10px;距離父容器就偏離了10px，加上以前的 top 和 left 就是 30px，而 padding 會把 d1 盒子給撐開了 10px。

但都對下面的盒子沒影響，緣由也就是 absolute：對象脫離常規流。

固定定位(fixed)：
fixed：與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。
因此：

.d1{
    border: 1px solid red;
    position: fixed;
    top: 20px;
    left: 20px;
}

top 和 left 是以窗口爲參考的!。當出現滾動條時，對象不會隨着滾動。還在原來的位置。

最後一點須要注意：使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom
屬性中的至少一個，不然left/right/top/bottom屬性會使用它們的默認值 auto，也就是至關於 relative 狀態。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。