相對定位(relative)、絕對定位(absolute)和z-index屬性
position屬性同樣可以實現和float屬性一樣的效果，其主要被運行於網頁佈局上。

它主要提供static, relative, absolute和fixed四個值。

static

為預設值，指示元素出現在正常的文件流中；

相對定位(relative)：

相對於該元素在文件流中的正常位置進行偏移定位，原佔位仍保留(即不脫離文件流)。

絕對定位(absolute)：

相對於static定位以外的最鄰近父級元素進行偏移定位，即相對於其直接父級元素。注意：脫離了文件流

絕對定位較少直接單獨

固定定位(fixed)：

相對於瀏覽器視窗進行定位，即固定定位是以瀏覽器視窗的最左上點作為基點進行偏移定位的。其位置隨時跟隨瀏覽器大小的變化而移動，因此應用得很少。主要運行於瀏覽器視窗的貼邊定位。絕對定位(absolute)同樣可以應用在固定定位的框架層裡面。

對於這三種定位，被定位的元素的位置都是通過 “left”, “top”, “right” 以及 “bottom” 這四個屬性進行指定的。

需要將被這三種方式定位的物件還原到正常的文件流

z-index屬性：使用了以上三種定位後，都會使正常的文件流一定程度上發生改變，造成元素顯示出現重疊的情形，特別是使用絕對定位時。為了能讓重疊的元素有序的顯示出來，我們需要在定位時對相關元素加上z-index屬性，其值是一個整數值（預設值為0），數值越大表示擁有的優先順序越高。該屬性只對使用了定位的元素有效。

新增屬性sticky:

這是一個結合了 position:relative 和 position:fixed 兩種定位功能於一體的特殊定位，適用於一些特殊場景。

什麼是結合兩種定位功能於一體呢？

元素先按照普通文件流定位，然後相對於該元素在流中

而後，元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。

注意position:sticky 的生效是有一定的限制的：

(1)這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同
(2)並且 top 和 bottom 同時設定時，top 生效的優先順序高，left 和 right 同時設定時，left 的優先順序高。
(3)達到設定的閥值。這個還算好理解，也就是設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。
(4)設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這裡需要解釋一下：

• 如果 position:sticky 元素的任意父節點定位設定為 overflow:hidden，則父容器無法進行滾動，所以position:sticky 元素也不會有滾動然後固定的情況。
• 如果 position:sticky 元素的任意父節點定位設定為 position:relative | absolute |
  fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。

position:sticky的使用場景

運用 position:sticky 實現頭部導航欄固定

1、sticky 不會觸發 BFC。如果不知道 BFC 可以看這裡。
2、z－index 無效。
3、sticky 是容器相關的，也就說 sticky 的特性只會在他所處的容器裡生效。這個比較抽象，demo點選預覽 在這裡，看完之後就懂了。強調這一點是因為在實際使用中，碰到 body 設定 height：100% 的時候 sticky 元素停在某一個位置不動了。

其實還可以有這 3 個取值：

{
    /* 全域性值 */
    position: inherit;
    position: initial;
    position: unset;
}

inherit:規定應該從父元素繼承 position 屬性的值。