在项目中,导航栏内部的超出部分定位设置了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