为什么z-index设置不生效？如何让Navbar内的文本显示在图片上方

问题原因 #

z-index属性仅对position值不为static（元素默认定位值）的元素生效，你为Navbar内部.container设置的z-index: 10没有生效，是因为该元素没有配置非static的定位规则，导致层级低于设置了绝对定位、z-index为5的图片。

解决方法 #

只需要给Navbar内部的.container新增position: relative规则即可，不需要改动其他现有逻辑：

.container { /* <------------------ 位于Navbar组件内部 */
  position: relative; /* 新增该行触发z-index生效 */
  display: flex;
  margin-left: 8vw; /*128/1440*/
  margin-right: 8vw; /*430/1440*/
  justify-content: space-between;
  max-height: 88px;
  z-index: 10;
}

position: relative不会改变元素原本的布局位置，仅会激活z-index规则，让容器的堆叠层级高于图片，实现文本显示在图片上方的效果。

内容的提问来源于stack exchange，提问作者János