什么是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')