网站导航栏防止插入Adsense自动广告

Google Adsense 自动广告虽省心，但有时候它会把广告放在不合适的位置上，严重影响用户访问。比如我的这个站点，会莫名其妙地把广告插入导航栏的上边或下边(蓝框里面)，这智能算法也是醉人。

以前我采取的解决方法是：后台设置直接排除对应区块。这样有可能会减少广告投放，影响搞钱，凡是和赚钱作对的事情都要弄得少少的。

后来我在“广告设置预览”中打开浏览器调试工具，发现 Google 是在<header></header> 中插入了和 nav 并列的广告代码。

先看 header.html 部分的代码

google 的算法貌似是优先往 header 里面插入广告块，nav 上下各一个广告位，毕竟黄金位置。

自动广告算法不是万能的，我用的这个皮肤，header 和 nav 是强关联的，nav 的部分样式从 header 继承。如果不做改动，结果是导航栏的蓝条框内都会被插入广告，奇丑无比，忍无可忍。

胳膊拧不过大腿，我的解决办法如下：

1. 把 header 的样式放到 nav 去

这样 header 样式为空，随便 Google 怎么玩，nav 是独立的，只要不蠢到往 <nav></nav> 里面放广告，导航条还在、功能显示、样式正常，就不影响用户使用。

顺带也把页面改了下，方便宽屏展示"侧边栏广告"，从别人那里学到的（毕竟维护网站也有费用，域名、主机、付出时间等都还远远没有回本）。

2. 再让 nav 能始终显示出来

 1.nav
 2  color: $haze
 3  display: flex
 4  justify-content: space-between
 5  background-color: $bg
 6  padding: 0 1.5rem
 7  position: relative
 8  width: 100%
 9  z-index: 999999
10  left: 0

核心属性为：position: relative 和 z-index: 999999，结果是让 nav 始终在占有一席之地，导航被挡或者弄错乱，会严重影响用户访问网站，信息入口要牢牢把控。

3. 查看结果

最终在广告预览里面显示广告模块，确认不会挤入 nav 中了，要不在上面，要不在下面，不影响导航。

如下图所示：

每个人的网站皮肤不一样，碰到类似情况，读者可以看看源码，再看看 Google Adsense 是自动往哪些区块插入，根据情况因对处理。