伪元素：正确的z-index堆叠上下文？

Question

我在同一级别上有两个DIV元素： bar 和 nav 以及::before伪元素。

导航和栏应出现在::before伪元素下，但导航内的文字应该出现在这里，如下所示：< / p>

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;