僞元素：正確的z-index堆棧上下文？

Question

我有兩個DIV元素在同一水平上：bar and nav與::before僞元素。

|- nav text 
    |- nav pseudo element 
     |- bar 

*, 
 
*::after, 
 
*::before { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
header { 
 
    position: relative; 
 
} 
 
.bar { 
 
    color: white; 
 
    background-color: black; 
 
} 
 
.nav { 
 
    background-color: orange; 
 
} 
 
p { 
 
    color: white; 
 
    margin-left: 10%; 
 
} 
 
.nav::before { 
 
    z-index: 0; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 40%; 
 
    bottom: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 4rem 4rem 0 0; 
 
    border-color: green transparent transparent transparent; 
 
}

<header> 
 
    <div class="bar">bar that should remain under green</div> 
 
    <div class="nav"> 
 
    <p>text that should appear above green</p> 
 
    </div> 
 
</header>

Answer 1

只需添加：

這導航和酒吧應在導航它上面，像這樣下::before僞元素，但文字顯示相同的屬性文本。

*, 
 
*::after, 
 
*::before { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
header { 
 
    position: relative; 
 
} 
 
.bar { 
 
    color: white; 
 
    background-color: black; 
 
} 
 
.nav { 
 
    background-color: orange; 
 
} 
 
p { 
 
    color: white; 
 
    margin-left: 10%; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 
.nav::before { 
 
    z-index: 0; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 40%; 
 
    bottom: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 4rem 4rem 0 0; 
 
    border-color: green transparent transparent transparent; 
 
}

<header> 
 
    <div class="bar">bar that should remain under green</div> 
 
    <div class="nav"> 
 
    <p>text that should appear above green</p> 
 
    </div> 
 
</header>