伪元素 z-index 问题

Question

我正在尝试使用伪元素在我的网站中设置列表样式来替换默认的项目符号点。但是，由于某种原因，伪元素会呈现在导航侧边栏中的下拉菜单顶部。将鼠标悬停在“悬停我”项目之一上以重现该问题。

: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;
}

.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;
}

<div class="header">
    <ul class="navigation">
        <li><a>Home</a></li>
        <li><a>Page 1</a></li>
        <li><a>Page 2</a></li>
        <li><a>Page 3</a></li>
        <li class="dropdown">
            <a>Hover me</a>
            <ul class="navigation">
                <li><a>Page 1</a></li>
                <li><a>Page 2</a></li>
                <li><a>Page 3</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a>Hover me</a>
            <ul class="navigation">
                <li><a>Page 1</a></li>
                <li><a>Page 2</a></li>
                <li><a>Page 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="content">
    <!-- [split][begin sample] -->
    <h1>Page title</h1>
    <h2>Secondary title</h2>
    <ul>
        <li>Entry 1</li>
        <li>Entry 2</li>
        <li>Entry 3</li>
        <ul>
            <li>Sub-entry 1</li>
            <li>Sub-entry 2</li>
            <li>Sub-entry 3</li>
            <ul>
                <li>Sub-sub-entry 1</li>
                <li>Sub-sub-entry 2</li>
                <li>Sub-sub-entry 3</li>
            </ul>
            <li>Sub-entry 4</li>
        </ul>           
    </ul>
</div>

我尝试将导航下拉列表的 Z 索引设置为高于列表中的伪元素，以便导航下拉列表呈现在项目符号点上，但这并没有解决问题。我认为项目符号可能位于单独的堆叠上下文中，并尝试将标题 HTML 移动到文档的末尾，以便堆叠上下文可以正确呈现，但这导致导航菜单根本无法呈现。我对下拉菜单有一个非常奇怪的设置，因此我包含了完整的上下文，以防万一这完全超出了左侧字段的范围。

Answer 1

这很奇怪...

我尝试了多种方法，但没有任何效果。但是，我发现它有效的一种方法（但是......假设它不是最好的）是将 z-index 设置为 -1 样式 (

.content>ul>li::before, ul>ul>li::before, ol>ul>li::before

) .

.content>ul>li::before, ul>ul>li::before, ol>ul>li::before {
    /* more stuff here */
    z-index: -1; /* It was 0 before */
}

更改后的代码片段如下。

: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: -1; /* The change is here */
}

/* 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;
}

.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;
}

<div class="header">
    <ul class="navigation">
        <li><a>Home</a></li>
        <li><a>Page 1</a></li>
        <li><a>Page 2</a></li>
        <li><a>Page 3</a></li>
        <li class="dropdown">
            <a>Hover me</a>
            <ul class="navigation">
                <li><a>Page 1</a></li>
                <li><a>Page 2</a></li>
                <li><a>Page 3</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a>Hover me</a>
            <ul class="navigation">
                <li><a>Page 1</a></li>
                <li><a>Page 2</a></li>
                <li><a>Page 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="content">
    <!-- [split][begin sample] -->
    <h1>Page title</h1>
    <h2>Secondary title</h2>
    <ul>
        <li>Entry 1</li>
        <li>Entry 2</li>
        <li>Entry 3</li>
        <ul>
            <li>Sub-entry 1</li>
            <li>Sub-entry 2</li>
            <li>Sub-entry 3</li>
            <ul>
                <li>Sub-sub-entry 1</li>
                <li>Sub-sub-entry 2</li>
                <li>Sub-sub-entry 3</li>
            </ul>
            <li>Sub-entry 4</li>
        </ul>           
    </ul>
</div>