最近遇到一个设置z-index数值失效的bug:
打开二层表(二层以上),第一层里面可以再次打开一层表,也成为子表,提交子表的时候会进行验证当前表内容,发现提交子表的时候验证的提示是父表的,发现子表的提交被父表遮挡了,子表父表新增的时候打开的是同样的代码,按理子表后打开,应该在父表的上层,不应该被父表遮挡呀,子表内容没被遮挡,就是提交按钮栏没遮挡了,这时候打开控制台进行识别提交按钮是哪层表的,发现是父表提交按钮元素,用图来展示,会更加明了
层级如下:
控制台鼠标指向页面按钮元素,显示父表按钮元素
按理这层是子表,提交应该是子表弹窗里的子表按钮呀,这时bug就出现了
因为子表父表走的代码块是一样的,css设置也是一样的,z-index设置也是一样的,bug修改从何下手???
在页面上,我直接在控制台这里测试,看如何能够把子表的按钮显示出来
把z-index数值从200改为2,子表显示出来了,但是为什么呢,因为还有其他系统也是这样设置的,没出现子表按钮被父表遮挡的bug,于是开始百度,找感觉
终于看到一篇深文《深入理解CSS中的层叠上下文和层叠顺序》:https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
看完后,我想到子表的最外层也就是弹窗的z-index,发现是101,作为后代的按钮banner z-index
是200.。。。。之后页面上进行测试,修改后代元素的按钮banner栏z-index,只要不大于最外层的z-index:101,子表就能够显示出来
问题根源找到了,顺带看了其他系统,发现其他系统的弹窗z-index是10002,难怪作为后代元素的按钮bannerz-index设置为200能够不被影响
我公司系统这个按钮banner css写法用了flex ,也用了fixed,都会引起层叠上下文 ,只是flex是后代元素设置z-index,fixed是当前元素可设置z-index(参考的上面那篇文章)
只能说,bug不是无缘无故出现的,都会有原因,修改bug,究其原因,在不知不觉中,我们也能获得成长。
当前现在为了进度,可能会出现为了修改bug而修改,不知其因,可能会产生额外的bug,或者引起其他功能的正常交互。