层叠上下文之父元素没有设置z-index,子元素设置无效

在项目中，导航栏内部的超出部分定位设置了z-index:999,看代码生效了，但是还是被app-main里的元素遮挡了。

将导航栏设置了z-index:1,子元素不设置z-index也不会被遮挡

z-index子元素设置但是父元素不设置会生效吗？不会生效，除非父元素已经形成了一个层叠上下文(stacking context)。

简明结论：

父元素是否设置z-index或形成层叠上下文             子元素设置 z-index是否有效

没有设置，也没形成上下文                                       子元素 z-index 无效

设置了 z-index 或其他方式形成上下文                    子元素 z-index有效

层叠上下文(stacking context)解释

一个元素的 z-index只有在它处于层叠上下文内时才会起作用。

什么会创建新的层叠上下文?

以下情况之一，就会创建新的层叠上下文(即子元素的 z-index 才会在这个上下文内生效):，元素设置了position:relative，absolute，fixed，sticky且z-index 不为 auto元素是 flex 或 grid 项，且 z-index 设置了值

元素使用了某些 CSS 属性:

transform、filter、perspective

opacity<1

will-change

mix-blend-mode

isolation: isolate