前言

position: sticky 是 CSS3 的屬性，類似於 position: fixed ，但並非根據整個畫面定位，而是可供定位的祖先元素。
過去往往要使用 javascript，才能製作根據捲動進度來定位的區塊（如選單），在 position: sticky 出現後可以更方便的達成想要的效果。

使用

與 position: fixed 相似，只要設定 position: sticky與定位(top, bottom, left, right)，會根據捲動來吸附定位的區塊就製作完成了。

.sidebar {
    position: sticky;
    top: 20px;
}

解決

最近在開發的時候，一直沒辦法達到想要的捲動定位效果，而只是類似於 position: relative，於是到處爬文，發現要定位元素的任意祖先元素，不能有 overflow: hidden，否則就會影響定位判斷，造成屬性失效，對此進行修正就正常了。

參考資料

position - CSS: Cascading Style Sheets | MDN