这篇文章主要介绍了css锚点定位被顶部固定导航栏遮住的解决方案，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联是一家集网站建设,兴和企业网站建设,兴和品牌网站建设,网站定制,兴和网站建设报价,网络营销,网络优化,兴和网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。
同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置，
如图所示：
如果使用锚点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。
1. 锚点定位机制
如果没有滚动条，锚点失效。
如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素padding-box上边缘位置。
2. 解决方案
示例
示例源码
示例在线预览
（1）padding+margin
padding影响锚点元素的定位，margin不影响锚点元素的定位。所以使用padding调整锚点元素跳转后的位置，使用margin抵消padding对布局的影响。
1.出现的时间、地点不同
.first {
padding-top: 60px;/* 60px是导航栏高度 */
margin-top: -60px;
}
优点
此方案无需添加额外的元素，直接使用 css 可解决问题。
缺点
当标题的文档层级和段落的文档层级不一致时会导致遮盖其他元素。
例如：标题使用了 relative 定位提升了文档层级。会出现鼠标无法选中标题上方被布局遮挡的段落，从而导致无法复制文档。
（2）用span或a标签作为锚点元素
非替换内联元素的padding不影响布局，但可以影响锚点位置。
2. require/exports 是运行时动态加载，import/export 是静态编译
.title_placeholder {
padding-top: 60px;
}.jpg)
缺点
同方案（1）
（3）暗锚点
在需要定位的元素上方加入不影响布局的空白锚点元素。
因为锚点跳转后的位置会落在元素的padding-box上边缘，设置 height影响锚点位置，设置margin-top抵消暗锚对布局对影响。
