position:fixed导航菜单覆盖内容的一种解决方法

通常我们会用 position: fixed 设置固定元素，但同时也衍生了一个问题，后面的元素会被固定元素覆盖掉一部分。例如常见固定导航菜单，紧接着的内容会被固定元素遮挡住。虽然可以用 margin-top 预留空隙，但这种方法比较刻板。当设置一个固定外边距，为了兼容响应式设计，你还要为不同设备设置对应值，很是麻烦。

这里分享一个相对简单可以解决该问题的方法，利用 position: sticky 设置固定元素，这个粘性定位属性就不会有上面所说问题。但同时也存在缺点，部分浏览器不支持（浏览器兼容列表）。

如果你的项目不用考虑老旧浏览器支持，只需下面几行 CSS 属性就可以解决问题。

position: -webkit-sticky;
position: sticky;
top: 0;

效果演示可以查看这个简单例子。