項目要求做一個仿照google瀏覽器的參數設置界面，拿到手任務的第一時間，去看了google瀏覽器設置界面的css結構，發現了很有趣的樣式，即這次的總結position:sticky.

通過查詢百度，知道了sticky屬性有以下幾個特點：

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

但是在實際用起來，還是不出意料有了些小問題，自己仿照寫的代碼不生效，為什么？

首先想到了是不是自己代碼里監聽了滾動條事件和這個有沖突，把事件統統禁掉，還是不生效。

然后又開始百度，最后拿到了問題的答案：

position:sticky 屬性，要求在其設置該屬性的所有父級元素上，不能有明顯的高度css屬性，即height:100%等都不行，經過排查，發現height:auto是可行的，就把父級換成了height:auto.

問題解決。

猜想是因為設置高度會影響overflow屬性，進而影響到sticky，關于這個原因我還是要繼續百度，弄清楚為止，加油。