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