昨天在sf的時候看到了一位朋友的提問，是問如何使頁面上的a標簽被點擊時跳轉的錨點的位置往下偏移一點，不會被最上方的header給遮蓋。當時看到這個問題也沒想出純CSS的解決方法，以為只有用js才能實現，后來另一位朋友的解答，恍然大悟，在他給出的方法上加以修改，完美實現了純CSS的解決方案

HTML:

CSS:

效果圖：

創建了一個隱藏的div，其高度和top都是等于fiexd的頂部的高度

我們可以發現，新增的隱藏快的目的就是就是將我們的內容撐下來從而展現在頁面上，而不是被fixed的內容所覆蓋(因為absolute元素的定位是根據relative來決定的，所以這里隱藏快的位置始終在文字的top等于-50px的位置)

總結

以上是生活随笔為你收集整理的纯CSS实现锚点跳转位置上下偏移的办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。