多个下拉框z-index层级影响的问题解决

什么是z-index?

 

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

写这篇文章是有原因的，在近期的项目中遇到了类似的问题，其中用到了很多办法，但是由于页面多，改一处就会影响其他的页面，因此做了一下整合处理。

在页面中我们会自定义写多个select下拉框，我这个下拉框写的是一个div，点击下拉是span，在写统一样式的时候设置了一个统一的z-index值，多个下拉框在一起时就出现了下图的问题：

解决方案：

多写一个active样式，通过js来控制将这个样式加到相对应的div上面，当点击下拉的时候，它的层级样式便是最高层的，当关闭下拉框的时候便移除这个active样式，层级就和之前的统一设置的一样了。

.active {
    z-index: 6999;
}

$(this).addClass('active').siblings().removeClass('active')