position 屬性有哪些值，各有什麼特色？

positon

定義和用法：position 屬性規定元素的定位類型。css

說明：這個屬性定義創建元素佈局所用的 定位機制 。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。html

—— 來自 w3school前端

position 有如下可選值：git

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 left 位置添加 20 像素。
sticky	CSS3 新增，粘性定位，相對於最近的一個擁有「滾動機制」的祖先上（當該祖先的overflow 是 hidden, scroll, auto 或 overlay時，即不是 visible 時）。它的行爲就像 position:relative 而當頁面滾動超出目標區域時，它的表現就像 position:fixed，它會固定在目標位置。
static	默認值。沒有定位，元素出如今正常的流中（忽略 left、top、right、bottom 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

其中，CSS 定位機制：github

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。面試

除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。算法

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。瀏覽器

行內框在一行中水平佈置。可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。markdown

position: absolute;

絕對定位 ，絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於 <html> :oop

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
複製代碼

div {
    width: 100px;
    height: 100px;
}

.one {
    background: red;
}

.two {
    background: yellow;
    position: absolute;
    top: 50px;
    left: 50px;
}

.three {
    background: green;
}
複製代碼

position: fixed;

固定定位 ，與絕對定位類似，但元素的包含塊爲 viewport 視口。該定位方式經常使用於建立在滾動屏幕時仍固定在相同位置的元素。在下面的示例中，"one" 元素定位在離頁面頂部 80px，離頁面左側 20px 的位置。

<div class="an">
	<div class="one">one</div>
	<div class="two">two</div>
</div>
複製代碼

.an {
    width: 500px;
    height: 300px;
    overflow: scroll;
    background: indianred;
}

.one {
    position: fixed;
    top: 50px;
    left: 50px;
    background: red;
    width: 100px;
    height: 100px;
    color: white;
}

.two {
    background: yellow;
    height: 500px;
}

複製代碼

position: relative;

相對定位 ，相對於其正常位置進行定位，不影響其餘元素的偏移。

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
複製代碼

div {
    width: 100px;
    height: 100px;
    color: white;
}

.one {
    background: red;
}

.two {
    background: yellow;
    position: relative;
    top: 50px;
    left: 50px;
}

.three {
    background: green;
}
複製代碼

position: sticky;

粘性定位 ，能夠被認爲是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位

這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位。常見的吸頂、吸底（頭部返回欄，底部切換欄等）的效果都是使用這個屬性：

注意：

須指定 top 、 right 、 bottom 、 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。而且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。
設定爲 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，不然 position:sticky 不會生效。若是 position:sticky 元素的任意父節點定位設置爲 overflow:hidden，則父容器沒法進行滾動，因此 position:sticky 元素也不會有滾動而後固定的狀況。若是 position:sticky 元素的任意父節點定位設置爲 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewport 定位。
達到設定的閥值，也就是設定了 position:sticky 的元素表現爲 relative 仍是 fixed是根據元素是否達到設定了的閾值決定的。

position: static;

靜態定位 ，HTML 元素默認狀況下的定位方式爲 static（靜態），靜態定位的元素不受 top、bottom、left 和 right 屬性的影響，它始終根據頁面的正常流進行定位

position: inherit;

inherit 值如同其餘 css 屬性的 inherit 值，即繼承父元素的 position 值。

天天三分鐘，進階一個前端小 tip 面試題庫算法題庫