纯CSS实现锚点跳转位置上下偏移的办法

本文主要是介绍纯CSS实现锚点跳转位置上下偏移的办法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

昨天在sf的时候看到了一位朋友的提问，是问如何使页面上的a标签被点击时跳转的锚点的位置往下偏移一点，不会被最上方的header给遮盖。当时看到这个问题也没想出纯CSS的解决方法，以为只有用js才能实现，后来另一位朋友的解答，恍然大悟，在他给出的方法上加以修改，完美实现了纯CSS的解决方案

HTML:

CSS:

效果图：

创建了一个隐藏的div，其高度和top都是等于fiexd的顶部的高度

我们可以发现，新增的隐藏快的目的就是就是将我们的内容撑下来从而展现在页面上，而不是被fixed的内容所覆盖(因为absolute元素的定位是根据relative来决定的，所以这里隐藏快的位置始终在文字的top等于-50px的位置)

这篇关于纯CSS实现锚点跳转位置上下偏移的办法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---