层叠上下文之父元素没有设置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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容