有趣的發現，position的sticky粘性佈局

第一次寫文章，鼓勵本身記錄下來有趣的發現。 

一直覺得position只有四個值 

 position: static; 

position: relative;

 position: absolute;

 position: fixed;

 其實還有一個很是有趣的值喲，那就是 position: sticky; 

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

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

 元素先按照普通文檔流定位，而後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。 

然後，元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。 這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。

 此處有一個灰常簡單的小demo供參考，sticky的兼容性不太好，最好用谷歌打開喲：codepen.io/woshilyy/pen/NMLLYv 

使用sticky能夠實現頭部導航固定，只需簡單的幾行css搞定，仍是很是方便的啊