sticky：設置了sticky的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。

　　可以知道sticky屬性有以下幾個特點：

• 該元素並不脫離文檔流，仍然保留元素原本在文檔流中的位置。
• 當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了top: 50px，那麽在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
• 元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那麽是相對於viewport來計算元素的偏移量

sticky與fixed的區別：在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。 這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

何時使用sticky?

用戶的屏幕越來越大，而頁面太寬的話會不宜閱讀，所以絕大部分網站的主體寬度和之前相比沒有太大的變化，於是瀏覽器中就有越來越多的空白區域，所以我們可能註意到很多網站開始在滾動的時候讓一部分內容保持可見，比如，側邊欄的部分區域。position:sticky為此而生。

何時使用fixed？

當需要使一個層相對於瀏覽器來自動調整該層的位置的時候，如果使用position的absolute屬性來定位該層，會發現absolute屬性並不能達到想要的css效果，。這時，就需要要用到fixed屬性來定位該層。

sixth week：third work