lazysheep 10 X 10
Last updated: 2017-11-29
lazysheep:~ Desktop$ node background对被覆盖元素视觉上的影响.js

> Post.tags
css

> Post.prev
Memeory Management In JS

> Post.next
《数据结构与算法JavaScript描述》学习笔记(三)—-—集合
background对被覆盖元素视觉上的影响

前言

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

  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-barback-ground属性是默认的那么被它覆盖在下面固定导航栏自然也就可见了。

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



总结

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