伪元素覆盖主类：中间Logo菜单下划线覆盖Logo且z-index无效

你遇到的这个问题很典型——绝对定位的伪元素和元素内容的堆叠层级冲突了。让我拆解一下原因，再给你调整后的代码：

问题根源 #

你给.logo加的::before伪元素，是插入到.logo元素内部、图片内容之前的生成内容。当你给它设置position: absolute时，它会默认堆叠在.logo内部所有内容的上层，哪怕你给.logo加z-index也没用，因为伪元素是.logo的子元素，它的堆叠层级是相对于父元素的堆叠上下文来计算的。

修复方案 #

我们可以把伪元素转移到.logo-wrapper（Logo的容器）上，这样伪元素和Logo图片就处于不同的堆叠上下文，再通过调整z-index确保Logo在上方：

修改后的CSS代码

* {
  background-color: #ededed;
  margin: 0; /* 去掉默认边距，避免布局偏移 */
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main: #5a189a; /* 补一个示例变量，避免报错 */
}

header::before {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, var(--main) 0, #7b31f4);
  position: relative;
}

.header-wrapper {
  width: 100%;
  height: 100px;
  display: flex;
}

.logo-wrapper {
  top: 70px;
  height: auto;
  position: absolute;
  /* 给容器加相对定位，让伪元素基于它定位 */
  position: absolute;
}

/* 把伪元素移到logo-wrapper上 */
.logo-wrapper::before{
  content: '';
  display: block;
  width: 334px;
  height: 82px;
  position: absolute;
  bottom: -40px;
  left: 50%; /* 调整left为50%，配合transform居中 */
  transform: translateX(-50%);
  border-top: 80px solid #fff;
  border-left: 37px solid transparent;
  border-right: 37px solid transparent;
  /* 把伪元素放在下层 */
  z-index: 1;
}

.logo {
  max-width: 150px;
  /* 给logo加相对定位，设置更高的z-index让图片在伪元素上方 */
  position: relative;
  z-index: 2;
}

nav {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
}

ul.left, ul.right {
  display: flex;
  list-style: none; /* 去掉默认列表样式 */
}

.nav-item {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
}

关键调整点

• 将::before伪元素从.logo转移到.logo-wrapper，避免和Logo图片共享堆叠上下文
• 给.logo添加position: relative和z-index: 2，确保Logo图片堆叠在伪元素上方
• 调整伪元素的left为50%并配合transform: translateX(-50%)，让梯形线条相对于Logo居中（之前的left: -50%会导致偏移）
• 补充了一些基础样式（比如去掉默认边距、列表样式），让布局更整洁

这样修改后，白色梯形线条就会在Logo下方显示，不会再覆盖Logo了。

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