前言

今天在写博客移动端的菜单栏的时候遇到了一点小问题:

1. 死活点不到Home的a标签，但是其他栏却能点到
2. 按理应该是Home的a标签被什么东西给覆盖了，但是问题又来了（既然都被覆盖了，为什么还看得到）。

解决问题1

先不管这么多了。先给固定的导航栏加个z-index: 999 再说.

看一下源码

1
2
3

#top-bar
  position: relative
  font-size: .8rem

果然，由于terminal的头部被设置了position: relative创建了一个堆叠上下文，并且由于在HTML中#top-bar的顺序在固定导航栏的后面所以它的堆叠顺序自然就靠前了。


解决问题2

问题1是解决了，可是问题2还是没有解决。。于是老夫查了一下标准。
标准上有这么一句话:
The default behavior of the background is to allow boxes behind it to be visible

大概意思就是说：如果覆盖的元素的background属性是默认的话，那么被覆盖元素也是可见的。

问题瞬间明了了，由于#top-bar的back-ground属性是默认的那么被它覆盖在下面固定导航栏自然也就可见了。

当我把它的background-color设为#fff时，自然而然就看不到被覆盖的部分了。



总结

遇到不能理解的情况出现时，要多查标准啊骚年。。。