很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。
同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置，
如图所示：
如果使用 锚 点实现目录的跳转会遇到 fixed 导航栏遮住了标题的问题。
1. 锚点定位机制
如果没有滚动条，锚点失效。
如果有滚动条，滚动条滚动到地址 hash （地址 # 号后面的内容）对应的锚点元素 padding-box 上边缘位置。
2. 解决 方案
示例
示例源码
示例在线预览
（1）padding+m arg in
padding影响锚点元素的定位，mar gin 不影响 锚点元素的定位。所以使用padding 调整 锚点元素跳转后的位置，使 用M argin抵消padding对布局的影响。
<h3 class="heading First " id="first">
1.出现的时间、地点不同
</h3>
.first {
padding -t op: 60px;/* 60px是导航栏高度 */
margin-top: -60px;
}
优点
此方案无需添加额外的元素，直接使用 css 可解决问题。
缺点
当标题的文档层级和段落的文档层级不一致时会导致遮盖其他元素。
例如：标题使用了 relative 定位 提升 了文档层级。会出现鼠标无法选中标题上方被布局遮挡的段落，从而导致无法复制文档。
（2）用span或a标签作为锚点元素
非替换内联元素的 padding 不影响布局，但可以影响锚点位置。
<h3 class="heading">
<span id="second" class="t IT le_placeholder">
2. require/ export s 是运行时动态加载，import/e xp ort 是静态编译
</span>
</h3>
.title_placeholder {
padding-top: 60px;
}
缺点
同方案（1）
（3）暗锚点
在需要定位的元素上方加入不影响布局的空白锚点元素。
因为锚点跳转后的位置会落在元素的 padding-box 上边缘，设置 h ei ght 影响锚点位置，设置 margin-top 抵消暗锚对布局对影响。
<div class="dark_anchor" id="third"></div>
<h3 class="heading">
3. require/exports 输出的是一个值的拷贝，import/export 模块输出的是值的引用
</h3>
.dark_anchor {
height: 60px;
margin-top: -60px;
}
优点
不影响其他元素的鼠标选择
缺点
此方案的定位元素的 margin 会影响锚点跳转后的位置，和直接设置标题为锚点元素的表现不一致。
例如：标题（定位元素）有 20px 的 边距 ，锚点跳转后20px的边距依旧保留。如果希望锚点跳转后标题置顶不受 margin 影响的 同学 慎用 此方案。
（4）:target 伪类
:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .
<h3 id="forth" class="heading">4. 用法不一致</h3>
:target {
padding-top: 60px;
margin-top: -60px;
}
此方案和方案（1）有异曲同工之妙，当跳转到某个（类）锚点时，锚点元素应用 :target 样式。
:target 浏览器兼容性：
3. 参考资料
URL锚点HTML定位技术机制、应用与问题
纯CSS实现网页内部锚点跳转时上下偏移
当锚点遇到fixed定位
到此这篇关于css锚点定位被顶部固定导航栏遮住的解决方案的 文章 就介绍到这了,更多相关css锚点被顶部固定导航栏遮住内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css锚点定位被顶部固定导航栏遮住的解决方案 全部内容，希望文章能够帮你解决 css锚点定位被顶部固定导航栏遮住的解决方案 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css锚点定位被顶部固定导航栏遮住的解决方案的详细内容...