布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）

# 布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）

作者：吴业飞

时间：2018.06.21

 

---

在工作中经常遇到使用`position: fixed;`固定在页面顶部的导航栏会遮挡页面主体内容，特别是在使用锚点跳转的时候，锚点默认跳转到视窗顶部，正好被导航遮挡。我使用过两种方式解决这个问题，各有优劣，视具体需求而定。

## 导航fix定位下的解决方案

思路是将锚点安在真正要使用锚点定位的元素的上一个兄弟元素上，文字表述有点绕，show the code!

假设我们要安锚点的元素是

<div id="backToTop">

我要瞬移到顶部！

</div>

现在我们修改`html`结构

<div id="backToTop">

</br>

</br>

</br>

</br>

</div>

<div>

我要瞬移到顶部！

</div>

原理很简单，我用`</br>`换行粗暴地撑开了一定的高度实现不被导航栏遮挡。这样的缺点是破坏了布局，撑开的间距可能会比较难看，如果导航的高度不是太大这点间距可以接受，如果导航的高度过高页面就会有较大留白，所以我不倾向使用这种方式，毕竟设计师要求100%还原设计稿。

## 使用absolute定位布局，