a便签作为锚点定位页面的位置还是很常见的，基本实现如下：

<a href="#person_card" >个人贷</a>
<a href="#company_card" >企业贷</a>

<div id="person_card">个人贷内容</div>
<div id="company_card">企业贷内容</div>

但是，点击锚点，会使相应内容直接滚动到页面最顶部，如果有一个固顶的导航栏，页面内容就会被覆盖，如下图所示：

锚点内容滚动到页顶，内容被遮挡

解决方法：

给要锚的元素设置一个比导航栏高度大一点padding-top，然后margin-top为导航栏高度的负值，这样该元素会覆盖其前面的元素，将前面元素的z-index设置高一点就ok啦~~
实现代码如下:

<a href="#person_card" >个人贷</a>
<a href="#company_card" >企业贷</a>

<div class="before_content">前面的内容</div>
<div id="person_card">个人贷内容</div>
css内容：

#person_card{
    padding-top: 50px;
    margin-top: -46px;// 导航栏高度为46
}
.before_content{
    z-index: 1;
}

实现效果：

导航栏固顶时，内容不会被遮挡：

导航栏未固顶时，视觉满足需求：