子元素z-index能否高于父元素？堆叠上下文遮挡问题求助

API 探路者

2026-8-3

堆叠上下文问题：装饰线条遮挡导航栏的解决方案

问题说明

四条装饰线条本应位于导航栏logo和页面内容下方，实际却遮挡了导航栏logo。尝试给navbar-logo设置更高z-index无效，因为父元素.navbar创建了堆叠上下文，子元素的z-index仅在该上下文内生效。

最优解决方案（无需改为背景图）

不用将线条转为body背景图，通过调整堆叠上下文层级即可解决，更灵活且易维护：

给.navbar设置更高的z-index，确保它的堆叠层级高于装饰线条
降低装饰线条的z-index，或直接移除其z-index（默认auto，会处于更低层级）

修改后的CSS代码

body {
  padding: 0;
  margin: 0;
  background: #333;
}
.navbar{
  padding: 1rem;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2; /* 提高导航栏堆叠层级 */
}
.navbar.bg-dark {
  background-color: #333;
}

.navbar-logo {
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 10px;
}

.content {
  padding: 100px 20px;
  height: 600px;
  color: white;
  font-weight: bold;
}

.page-container {
  max-width: 1024px;
  margin: 0 auto;
}

/* Line */
.line {
  width: 100vw;
  left: 100px;
  height: 3px;
  background-color: #5c5c5c;
  position: fixed;
  transform-origin: left;  
  top: -1px;
  z-index: 0; /* 降低线条堆叠层级，或直接删除该行 */
}
.line.line-1 {
  transform: rotate(27.45deg);
}
.line.line-2 {
  transform: rotate(47deg);
}
.line.line-3 {
  transform: rotate(70deg);
}
.line.line-4 {
  transform: rotate(105deg);
}