很多网站都有固定顶部导航栏，方便用户搜索和跳转到其他页面。同时，为了方便用户浏览较长的文档，将增加目录。点击段落标题跳转到该段落所在位置，如图：如果使用锚点实现目录跳转，会遇到固定导航栏遮住标题的问题。.1、如果锚点定位机制中没有滚动条，锚点将失效。如果有滚动条，则滚动条滚动到地址hash（地址#后面的内容）对应的锚元素的padding-box的上边缘位置。2.解决方案示例示例源码示例在线预览（1）padding+marginpadding影响锚元素的定位，margin不影响锚元素的定位。所以padding用来调整跳转后锚元素的位置，margin用来抵消padding对布局的影响。1.出现的时间和地点不同.first{padding-top:60px;/*60px是导航栏的高度*/margin-顶部：-60px；}优点这种方案不需要添加额外的元素，直接使用css就可以解决问题。缺点当标题的文档级别与段落的文档级别不一致时，会导致其他元素被遮挡。示例：标题使用相对定位来提升文档层次结构。有时鼠标无法选中标题上方被布局挡住的段落，导致无法复制文档。(2)使用span或者a标签作为非替换行内元素的锚元素padding不影响布局，但是会影响锚位置。2.require/exports是运行时动态加载，import/export是静态编译.title_placeholder{padding-top:60px;}缺点同方案(1)(3)深色锚点在需要定位的元素上方添加一个不影响布局的空白锚点元素。因为跳转后锚点的位置会落在元素padding-box的上边缘，设置height会影响锚点的位置，设置margin-top抵消了深色锚点对布局的影响.
