经常用到z-index来控制div的层次，如果这个页面的div都不写这个值，默认所有的div都处于同一层。值越大越靠上，至于顶层一般写为：

.div{z-index:999} //数值可以为负整数、0、正整数

或更大的值，一个网页实际上并不会用这么多的图层，和Photoshop毕竟形成机制不一样，Html不需要一层层的写。搜索引擎会从上至下一次读取，也就是说在没有明确说明层次关系时，如果div发生重叠，就会以最下的那个div为上层。

z-index属性常用在顶部导航、侧面客服、工具等，平时写代码的时候就不用担心书写顺序的问题，这些位置基本上都会考虑置于顶层，实现正常操作。

大家应该也遇到过z-index失效的情况，让人很是郁闷。笔者自查了一下，关于z-index失效的情况，大概有以下这几种情况。

z-index元素的position属性要是relative、absolute、fixed。

1.父元素position为relative时，子元素的z-index失效。

解决：父元素position属性修改为absolute或static

2.该元素没有设置position属性为非static

解决：设置该元素的position属性为relative、absolute或fixed中的一种。

3.该元素在设置z-index的同时还设置了float浮动

解决：float去除，该为display:inline-block。

按照这个逻辑其实还是会遇到很多状况，比如被video标签遮挡、轮播图遮挡等，就不能单纯的用position来解决。笔者也没有去深究这个属性，在自适应的潮流里，position绝对定位和相对定位还是尽量少用，多用float浮动，能提高生产效率。

笔者做的导航都比较精简，均采用CSS的处理方式而不采用JS的处理方式。导航设计得太复杂的话就比较难处理了，导航也不应该设计得太过于复杂，增加用户的学习成本。简约的顶部导航也有利于用户快速查找相关内容，搜索引擎也能顺利抓取，快速了解网站结构。