Position
CSS
position屬性用於指定一個元素在文件中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。
在分析position元素定位之前，先來說說什麼是文件流？（自我理解）
瀏覽器在預設情況下規定一個塊元素在父元素內排列規則：
- 元素從上到下、從左到右排列
- 一個塊級元素獨佔一行
- 行內元素不會獨佔一行
- 浮動元素在一行排不下則換行繼續浮動
position 屬性的五個值：
- static
- relative
- absolute
- fixed
- sticky
一、static(預設值)
該關鍵字指定元素使用
正常的佈局行為，即元素在文件常規流中當前的佈局位置。此時top,right,bottom,left和z-index屬性無效。
二、relative
relative：相對定位
該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面佈局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素
無效。
語法：
div{ position:relative; }
特點：
1. 參照相對沒有定位前的自己
2. 有層級，後來居上-- 層級高
3. 佔據自己原來的位置--在原來的文件流當中存在自己的位置
4. 不會改變元素的特徵，行內還是行內，塊級還是塊級
5. 支援margin、padding、margin：auto
6. 不脫離文件流
三、absolute
absolute：絕對定位
元素會被移出正常文件流（脫離文件流），並不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margins），且不會與其他邊距合併。
語法：
div{ position:absolute }
特點：
1. 脫離文件流
2. 提升層級不佔原來的位置，後來者居上
3. 不支援margin：auto，支援margin
4. 參照物：預設參照body，絕對定位的元素位置相對於最近的 已定位 的祖先元素
5. 行內元素支援寬高，塊級元素內容撐開寬高改變元素特性
6. 一般配合相對定位使用-- 父相子絕
四、fixed
fixed：固定定位
元素會被移出正常文件流，並不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。
語法：
div{ position:fixed }
特點：
1.參照物：相對 瀏覽器視窗 定位！
2.脫離文件流，提升層級
3.不支援margin：auto
4.可以改變元素特性，行內->塊級
五、sticky
sticky：粘性定位（基於使用者的滾動位置來定位）
元素根據正常文件流進行定位，然後相對它的最近滾動祖先包括table-related元素，基於
top,right,bottom, 和left的值進行偏移。偏移值不會影響任何其他元素的位置。
粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換，表現為在跨越特定閾值前為相對定位，之後為固定定位。
注意：只有指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
語法：
div.sticky { position: -webkit-sticky; position: sticky; top: 0; }
---層級關係(z-index)
因為元素的定位與文件流無關，所以它們可以覆蓋頁面上的其它元素，這裡 z-index 屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）
-
z-index--可以調換兩個層的上下位置關係
-
值可為正也可為
負，值越大越在上面，預設為0 -
只能同級元素對比 -
z-index
只對定位的元素有效，其他元素均無效
{
position:absolute;
left:0px;
top:0px;
z-index:-1; /* 置於底層 */
}
參考文件：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
https://www.runoob.com/css/css-positioning.html