作者:
WangMin
格言:努力做好自己喜歡的每一件事
在講幾種定位方式之前，我們先來了解一下什么是普通流(normal flow)？
除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平布置。
position 屬性的作用
position 用於定位盒子對象，有時一個布局中幾個小對象，不易用css padding、css margin 進行定位，這個時候我們就可以使用 position 定位來搞定。特別是一個盒子里幾個小盒子不規律的布局，這個時候我們使用 position 定位非常方便布局對象。
position 屬性用來指定一個元素在網頁上的位置，一共有5種定位方式，也就是說 position 屬性主要有五個屬性值。如下：
| 屬性值 | 含義 |
|---|---|
| static | 默認值 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
元素可以使用的頂部（top），底部 (bottom)，左側 (left)，右側 (right)及 z-index 屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法。
position:static
static 是 position 屬性的默認值。如果省略 position屬性，瀏覽器就認為該元素是 static定位。
這時，瀏覽器會按照源碼的順序，決定每個元素的位置，這稱為"正常的頁面流"（normal flow）。每個塊級元素占據自己的區塊（block），元素與元素之間不產生重疊，這個位置就是元素的默認位置。
注意，static定位所導致的元素位置，是瀏覽器自主決定的，所以這時top、bottom、left、right、 z-index這五個屬性無效。
position:relative
相對定位的偏移參考元素是元素本身，不會使元素脫離文檔流。用相對定位的元素不管它是否進行移動，元素仍要占據它原來的位置。移動元素會導致它覆蓋其他的框。相對定位元素常常作為絕對定位元素的父元素。並且定位元素經常與z-index屬性進行層次分級。它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。例子如下：
沒有使用position:relative時:
<div class="box">
<div class="same one"></div>
</div>
.box{
width:200px;
border:1px solid #ccc;
}
.box>.same{
width:200px;
height:200px;
line-height: 50px;
text-align: center;
color: azure;
margin-bottom: 20px;
}
.box>.one{
background:#CCCCCC;
}
使用position:relative時:
.box>.one{
background:#CCCCCC;
position: relative;
top: 10px;
left:10px;
}
我們使用了 top:10px 和 left:10px 將 one元素進行了調整，通過上圖就會發現這兩個10px並不屬於盒子模型，他只是用定位將 one元素進行了位置調整。上面代碼中，div元素從默認位置向下偏移10px（即距離頂部10px），向右偏移10排序（即距離左邊10px）。
position:absolute
它有一個重要的限制條件：相對於已定位的最近的祖先元素，如果沒有已定位的最近的祖先元素，那么它的位置就相對於最初的包含塊（如body）。另外，absolute定位也必須搭配top、bottom、left、right這四個屬性一起使用。
絕對定位的框脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設置Ｚ-Iindex屬性來控制這些框的堆放次序。
<div class="box">
<div class="same one"></div>
<div class="same two"></div>
<div class="same three"></div>
</div>
.box{
width:200px;
border:1px solid #ccc;
}
.box>.same{
width:200px;
height:200px;
line-height: 50px;
text-align: center;
color: azure;
margin-bottom: 20px;
}
.box>.one{
background:#CCCCCC;
}
.box>.two{
background:pink;
}
.box>.three{
background:burlywood;
}
正常文檔流顯示的效果：
未給父級元素 .box 添加相對定位，給 .two 元素設置絕對定位例子如下：
.box>.two{
background:pink;
position: absolute;
top:20px;
left:20px;
}
以上例子可以看出由於未給父級元素 .box 添加相對定位，給 .two 元素設置絕對定位，使的 .two 脫離了普通流，原來的位置沒有保留，而且將 .one 覆蓋，並對文檔的根元素進行了絕對定位，定位於距離文檔根元素頂部20px，左側20px的位置。
給父級元素 .box 添加相對定位，然后再給 .two 元素設置絕對定位例子如下：
.box{
width:200px;
border:1px solid #ccc;
position: relative;
}
.box>.two{
background:pink;
position: absolute;
top:20px;
left:20px;
}
以上例子可以看出 .two 元素相對於父元素 .box 進行了絕對定位，使的 .two 脫離了普通流，原來的位置沒有保留，還將 .one 覆蓋，並且 .two 元素定位於距離父元素 .box 頂部20px，左側20px的位置。
從以上例子中可以得出一個結論，如果想要子元素定位於父元素的某個位置，必須給父元素設置一個相對定位 position:relative，才能使子元素出現在父元素的正確位置。
position：fixed
fixed表示，相對於視口（viewport，瀏覽器窗口）進行偏移，即定位基點是瀏覽器窗口。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。 常用於創建在滾動屏幕時仍固定在相同位置的元素。如果想要某個元素固定在頁面的某個位置不動的話，就個這個元素設置 position：fixed，並通過 top 或 bottom 和 left 或right 調整位置就能實現固定元素的效果。
position：sticky
sticky 跟前面四個屬性值都不一樣，它會產生動態效果，很像 relative 和fixed 的結合：一些時候是relative定位（定位基點是自身默認位置），另一些時候自動變成fixed定位（定位基點是視口）。
因此，它能夠形成"動態固定"的效果。例子如下，初始加載時在自己的默認位置（relative定位）。
<div class="box box11">111111</div>
<div class="box box1 active">222222</div>
<div class="box box2">333333</div>
<div class="box box3">444444</div>
<div class="box box4">555555</div>
<div class="box box5">666666</div>
.box{
width:50%;
height:400px;
color:#fff;
margin-bottom: 20px;
}
.box11{
background:#f00;
}
.box1{
background:#000;
}
.box2{
background:palegoldenrod;
}
.box3{
background:peru;
}
.box4{
background:blueviolet;
}
.box5{
background:burlywood;
}
.active{
position:sticky;
top:0px;
}
頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。
等到頁面重新向上滾動回到原位，工具欄也會回到默認位置。
sticky 生效的前提是，必須搭配top、bottom、left、right 這四個屬性一起使用，不能省略，否則等同於relative定位，不產生"動態固定"的效果。原因是這四個屬性用來定義"偏移距離"，瀏覽器把它當作 sticky 的生效前提。
它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與 sticky 元素的距離達到生效前提，relative 定位自動切換為 fixed 定位；等到父元素完全脫離視口時（即完全不可見），fixed 定位自動切換回relative 定位。
sticky屬性有以下幾個特點：
1、該元素並不脫離文檔流，仍然保留元素原本在文檔流中的位置。
2、當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。即如果你設置了top: 20px，那么在sticky元素到達距離相對定位的元素頂部20px的位置時固定，不再向上移動。
3、元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對於瀏覽器窗口來計算元素的偏移量。
position：sticky使用條件：
1. 父元素不能設置 overflow:hidden; 或者 overflow:auto; 屬性；
2. 必須制定 top、bottom 、left 、 right 4個值之一，否則只會處於相對定位；
3. 父元素的高度不能低於sticky 元素的高度；
4. sticky 元素僅在其父元素內生效；
position：sticky 這個屬性的兼容性還不是很好，目前仍是一個試驗性的屬性，並不是W3C推薦的標准。具體情況可以如下圖：
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!