为何含h3的div无法置于nav栏后方？z-index层级问题

问题根源 #

z-index 仅对设置了 position: relative/absolute/fixed/sticky 的元素生效，同时如果子元素（比如你提到的h3）设置了独立的z-index，会形成独立堆叠上下文，导致子元素层级脱离父级，出现内容在nav前、背景在nav后的矛盾情况。

具体修复步骤 #

1. 给项目名称div添加非static的定位属性，让它的z-index能正常生效；
2. 设置项目名称div的z-index数值小于nav的z-index（你的nav是1，所以div设为0或-1即可）；
3. 清除或让h3继承父级的z-index，避免子元素形成独立堆叠上下文盖过nav。

修改后的代码示例 #

假设你的原代码结构如下，修改后的CSS参考：

/* nav保持原有设置，确保定位和z-index生效 */
nav {
  position: fixed; /* 或relative/absolute，必须非static */
  z-index: 1;
  /* 其他样式：宽度、背景色等 */
}

/* 项目名称div的关键修改 */
.project-name-div {
  position: relative; /* 开启定位，让z-index生效 */
  z-index: 0; /* 数值小于nav的1，确保整个div在nav后方 */
  background: url('你的背景图路径');
  /* 其他样式：宽高、布局等 */
}

/* h3的修改，避免独立堆叠 */
.project-name-div h3 {
  position: relative;
  z-index: inherit; /* 继承父级z-index，不单独创建堆叠上下文 */
  /* 鼠标悬停展开的样式 */
}

额外检查点 #

• 如果nav使用的是position: static，也要给nav加上非static的定位（比如relative），否则它的z-index不会生效；
• 确保项目名称div的父元素没有设置transform/opacity/filter等属性，这些属性会创建独立堆叠上下文，导致子元素的z-index失效。

内容的提问来源于stack exchange，提问作者kuroneko