伪元素：适当的 z-index 堆叠上下文？

Question

我在同一层有两个 DIV 元素：bar 和 nav 以及 ::before 伪元素.

nav 和 bar 应该出现在 ::before 伪元素下，但文本在 nav 在它上面，像这样：

|- 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

只需将相同的属性添加到文本即可。

*,
*::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>

伪元素：适当的 z-index 堆叠上下文？

Pseudo element: proper z-index stacking context?

css

z-index