CSS锚点定位时被顶部固定导航栏遮住 - yingzi__block

CSS锚点定位时被顶部固定导航栏遮住

问题：使用锚点定位时，部分内容被顶部的固定导航栏遮住

锚点使用代码示例如下：

<a href="#first">a</a>
<div id="first">
    hello
</div>

解决方法：

一、使用padding+margin

padding 影响锚点元素的定位，margin 不影响锚点元素的定位。所以使用 padding 调整锚点元素跳转后的位置，再使用 margin 抵消 padding 对布局的影响。

#first {
    padding-top: 60px;/* 60px是导航栏高度 */
    margin-top: -60px;
 }

二、使用伪类:target

#first:target {
    padding-top: 60px;
    margin-top: -60px;
  }