z-index失效的bug

最近遇到一个设置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，或者引起其他功能的正常交互。