Quick Fix - 網頁利用錨點連結導航時，導覽列遮住了標題怎麼辦

Q：這是個常見的 CSS 問題，當利用錨點連結 <a href="#heading"></a> 跳到該標題時，如果是 Fixed 或 Sticky 的導覽列就會擋住標題，可以參考這個 CodePen範例

A：這問題的解法有相當多種，但這邊想推薦一個最簡單的純 CSS 解法：

:root {
  scroll-padding-top: 3rem;
}

將上述 3em 的部分替換成自己的導覽列高度即可，可以在 CodePen範例 中玩玩看！

Quick Fix 是一些我自己平時遇到各種小問題的合輯，並提供自己的快速解法

參考

3 More Life-Changing CSS Tips

5 More Must Know CSS Tricks That Almost Nobody Knows

MDN: scroll-padding-top