html - 优先考虑两个绝对要素

我有两个绝对元素，它们重叠。我想让一个在另一个上面显示。在下面的示例中，我希望带文本的粉红色图形显示在用::before创建的伪元素上方。
我试过z-index，但似乎没用。
有什么想法吗？

.navbar {
  display: flex;
}
.lightbox {
  display: none;
  margin: auto;
}
.links {
  flex: 1;
  text-align: center;
  display: block;
}

.lightbox:target {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: black;
  left: 0;
  align-items: center;
  justify-content: center;
}
#close_button {
  position: relative;
  display: block;
}

.lightbox #close_button::after {
  content: "x";
  color: white;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: -1rem;
  top: -1rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
}
figcaption {
  z-index: 1000;
  background: lightpink;
  width: 25rem;
  text-align: center;
}

#close_button::before {
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,.7);
  height: 100%;
  width: 100%;
  content: "";
  border: solid red;
  position: fixed;
}

    <div style="height: 200px; background: lightgreen;">
    <nav class="navbar">
      <a class="links" href="#text1">Open example 1</a>
      <a class="links" href="#text2">Open example 2</a>
    </nav>
    <br><br>
    <div class="lightbox" id="text1">
      <figure>
        <a href="#" id="close_button"></a>
        <figcaption>
          Ipsum lorem ...
        </figcaption>
      </figure>
    </div>
    <div class="lightbox" id="text2">
      <figure>
        <a href="#" id="close_button"></a>
        <figcaption>
          Some latin text in textbox2 ...
        </figcaption>
      </figure>
      </div>

    </div>

最佳答案

要使z-index工作，元素必须具有static以外的位置。在您的案例中，元素需要有position: relative

.navbar {
  display: flex;
}
.lightbox {
  display: none;
  margin: auto;
}
.links {
  flex: 1;
  text-align: center;
  display: block;
}

.lightbox:target {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: black;
  left: 0;
  align-items: center;
  justify-content: center;
}
#close_button {
  position: relative;
  display: block;
}

.lightbox #close_button::after {
  content: "x";
  color: white;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: -1rem;
  top: -1rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
}
figcaption {
  z-index: 1000;
  background: lightpink;
  width: 25rem;
  text-align: center;
  position: relative;
}

#close_button::before {
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,.7);
  height: 100%;
  width: 100%;
  content: "";
  border: solid red;
  position: fixed;
}

I have following example: https://codepen.io/elenaoat/pen/NzdVda?editors=1100

When you click on the buttons you will see some text popping up. I cannot figure out how to get the text in the figcaption to be "above" the pseudo-element created with before. Right now the pseudo-element covers the whole window, which is fine, but I want the pink div with the text to show above it, so it's not greyed out.

    <div style="height: 200px; background: lightgreen;">
    <nav class="navbar">
      <a class="links" href="#text1">Open example 1</a>
      <a class="links" href="#text2">Open example 2</a>
    </nav>
    <br><br>
    <div class="lightbox" id="text1">
      <figure>
        <a href="#" id="close_button"></a>
        <figcaption>
          Ipsum lorem ...
        </figcaption>
      </figure>
    </div>
    <div class="lightbox" id="text2">
      <figure>
        <a href="#" id="close_button"></a>
        <figcaption>
          Some latin text in textbox2 ...
        </figcaption>
      </figure>
      </div>

    </div>