css锚点精准定位被顶部固定不动导航栏栏遮挡住

许多网站都有1个固定不动在上方的导航栏栏，便捷客户检索和自动跳转到别的网页页面。

另外以便便捷客户访问长文本文档，都会再加文件目录，点一下段落题目自动跳转到段落所属的部位，

如图所示：

假如应用锚点完成文件目录的自动跳转会遇到 fixed 导航栏栏遮挡住了题目的难题。

1. 锚点精准定位体制

假如沒有翻转条，锚点无效。

假如有翻转条，翻转条翻转到详细地址 hash （详细地址 # 号后边的內容）对应的锚点元素padding-box上边沿部位。

2. 处理计划方案

示例

示例源代码

示例线上预览

（1）padding+margin

padding危害锚点元素的精准定位，margin不危害锚点元素的精准定位。因此应用padding调剂锚点元素自动跳转后的部位，应用margin相抵padding对合理布局的危害。

<h3 class="heading first" id="first">
    1.出現的時间、地址不一样
</h3>

.first {
    padding-top: 60px;/* 60px是导航栏栏高宽比 */
    margin-top: ⑹0px;
 }

优势

此计划方案不用加上附加的元素，立即应用 css 可处理难题。

缺陷

当题目的文本文档等级和段落的文本文档等级不1致时会致使遮住别的元素。

比如：题目应用了 relative 精准定位提高了文本文档等级。会出現电脑鼠标没法选定题目上方被合理布局遮挡的段落，从而致使没法拷贝文本文档。

（2）用span或a标识做为锚点元素

非更换内联元素的padding不危害合理布局，但能够危害锚点部位。

<h3 class="heading">
    <span id="second" class="title_placeholder">
    2. require/exports 是运作时动态性载入，import/export 是静态数据编译程序
    </span>
</h3>

.title_placeholder {
    padding-top: 60px;
}

缺陷

同计划方案（1）

（3）暗锚点

在必须精准定位的元素上方添加不危害合理布局的空白锚点元素。

由于锚点自动跳转后的部位会落在元素的padding-box上边沿，设定 height危害锚点部位，设定margin-top相抵暗锚对合理布局对危害。

<div class="dark_anchor" id="third"></div>
<h3 class="heading">
    3. require/exports 輸出的是1个值的复制，import/export 控制模块輸出的是值的引入
</h3>

.dark_anchor {
    height: 60px;
    margin-top: ⑹0px;
}

优势

不危害别的元素的电脑鼠标挑选

缺陷

此计划方案的精准定位元素的margin会危害锚点自动跳转后的部位，和立即设定题目为锚点元素的主要表现不1致。

比如：题目（精准定位元素）有 20px 的边距，锚点自动跳转后20px的边距依然保存。假如期待锚点自动跳转后题目置顶不会受到 margin危害的同学慎用此计划方案。

（4）:target伪类

:target CSS 伪类 意味着1个唯1的网页页面元素(总体目标元素)，其id 与当今URL片断配对 .

<h3 id="forth" class="heading">4. 用法不1致</h3>

:target {
    padding-top: 60px;
    margin-top: ⑹0px;
  }

此计划方案和计划方案（1）有如出一辙之妙，当自动跳转到某个（类）锚点时，锚点元素运用 :target 款式。

:target访问器适配性：

3. 参照材料

URL锚点HTML精准定位技术性体制、运用与难题

纯CSS完成网页页面內部锚点自动跳转时左右偏位

当锚点遇到fixed精准定位

到此这篇有关css锚点精准定位被顶部固定不动导航栏栏遮挡住的处理计划方案的文章内容就详细介绍到这了,更多有关css锚点被顶部固定不动导航栏栏遮挡住內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！