问题描述
如上图红色箭头指向的区域发生了重叠了，再看看 .more-channel 对应的 z-index 设置了 300 了，第一反应加大 z-index 的值，可是结果还是重叠了。
于是再来观察一下 两个 重叠在一起的区域的 DOM 结构， 可以发现more-channel 所在的div 和 搜索框 所在的div 没有直接的关系， 因此， 需要再往上层去寻找关系，经过一番折腾，最终我发现： more-channel 的 祖父级 head-wrap 与 搜索框是兄弟节点， 并且此时的 head-wrap 的position 被设置成了 fixed
解决
给 head-wrap 的z-index 设置一个正数值即可
原因
浅说position定位及z-index使用
使用前提
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理
z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。
使用的相对性
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。 向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值， 决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。
所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。
也因为这个相对性，还会引发浏览器表现不一致出现兼容问题。原因是ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0， 而Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。
还有一点需要注意，负值的z-index也依照大小比较的原理，但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题，请谨慎使用。
