项目中遇到了z-index设置的优先级无效,通过搜索发现有以下几种情况会导致z-index无效:
①父级元素溢出隐藏或者不显示。如果父元素设置了 overflow:hidden /display:none 等,子元素在父元素外部绝对定位,那么调节子元素 z-index 可能不会显示。
解决方案:取消父元素的上述属性。如果父元素的 overflow:hidden 不能取消另一种方法是,直接把子元素和父元素分离
②父级元素层级低。
解决方法:查看父元素的 z-index 一并修改
③没有设置定位。使用 z-index 的前提是,需要设置定位,position的值为relative/absolute/fixed,如果没有定位,那么设置z-index不会使当前元素在另一个元素上方。
解决办法:设置position。