伪元素z-index层级问题：导航下拉菜单被列表伪元素遮挡

问题根源 #

你的下拉菜单虽设置了z-index: 100，但它所在的.header容器（fixed定位）未显式设置z-index，导致整个导航区域的堆叠层级低于后续DOM中普通流的.content元素，.content里的列表伪元素因此默认显示在导航下拉菜单上方。

解决方案 #

给.header添加z-index属性，让整个导航侧边栏的堆叠上下文高于内容区域：

.header {
    position: fixed;
    height: 100%;
    width: var(--sidebarWidth);
    border-right: var(--borderWidth) solid var(--accent);
    background-color: var(--dark);
    background-blend-mode: difference;
    z-index: 10; /* 添加这一行 */
}

完整修改后的CSS代码 #

:root {
/* Color definitions */
    --dark: #090515;
    --light: #EAE8F1;
    --accent: #667fcc;
    --accentLight: #8c9fd9;
    --accentDark: #5f73ad;

    /* Style settings */
    --contentWidth: 65vw;
    --sidebarWidth: calc(calc(100vw - var(--contentWidth))/2);
    --contentHorizontalPadding: 3%;
    --paragraphSpacing: 5px;
    --fontSize: 16px;
    --navFontSize: 16px;
    --navItemSpacing: 6px;
    --navVerticalPadding: 2px;
    --dropdownOffset: calc(calc(var(--navVerticalPadding)*2 + var(--navFontSize) + var(--navItemSpacing)*2)*-1);
    --ULBumpWidth: 5px;
    --ULMargin: 10px;
    --ULPadding: 5px;
    --borderRadius: 2px;
    --borderWidth: 2px;
}

/* Text styling */
body {
    background-color: var(--dark);
    color: var(--light);
    margin: 0;
    font-family: "Noto Sans Mono", monospace;
}

.content {
    margin-left: var(--sidebarWidth);
    padding: 10px;
    font-size: var(--fontSize);
}

.content>ul, ul>ul, ol>ul {
    list-style-type: none;
    border-left: var(--borderWidth) solid var(--accent);
    padding-left: var(--ULPadding);
    margin-left: var(--ULMargin);
}

.content>ul>li::before, ul>ul>li::before, ol>ul>li::before {
    content: "";
    position: relative;
    display: inline-block;
    background-color: var(--accent);
    height: calc(var(--fontSize)/2);
    width: var(--ULBumpWidth);
    bottom: calc(var(--fontSize)/8);
    right: var(--ULPadding);
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
    z-index: 0
}

/* Navigation styling */
.header {
    position: fixed;
    height: 100%;
    width: var(--sidebarWidth);
    border-right: var(--borderWidth) solid var(--accent);
    background-color: var(--dark);
    background-blend-mode: difference;
    z-index: 10; /* 新增：提升导航区域堆叠层级 */
}

.navigation {
    list-style-type: none;
    padding: 0;
    background-color: var(--dark);
}

.navigation a {
    font-size: var(--navFontSize);
    width: 90%;
    margin: 0 5% var(--navItemSpacing) 5%;
    display: inline-block;
    text-decoration: none;
    padding: var(--navVerticalPadding) 6px;
    background-color: var(--accentLight);
    color: var(--dark);
}

/* ul needs to be absolute so the dropdown does not displace other elements */
li.dropdown>ul {
    position: absolute;
    left: 100%;
    width: 100%;
    background: none;
    z-index: 100;
    display: none;
}

/* Some unorthodox positioning is needed list items since the parent element is offset and cannot be easily fixed */
li.dropdown>ul>li {
    position: relative;
    top: var(--dropdownOffset);
    background-color: var(--dark);
}

li.dropdown>ul>li>a {
    padding: var(--navVerticalPadding) 0;
}

li.dropdown:hover>ul>li>a {
    padding: var(--navVerticalPadding) 6px;
}

li.dropdown:hover>ul {
    display: block;
}

为什么之前的尝试无效？ #

• 仅给下拉菜单设置z-index没用：下拉菜单的堆叠上下文受父容器.header限制，.header本身层级不够的话，内部元素再高也无法突破这个限制。
• 移动.header到文档末尾导致菜单不显示：fixed定位元素的显示位置和DOM顺序无关，但你的.content设置了margin-left: var(--sidebarWidth)，移动后.header会因堆叠层级问题被.content覆盖，属于绕远路的无效操作。

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