优先考虑两个绝对元素

Question

我有两个重叠的绝对元素。我想让一个显示在另一个之上。在下面的示例中，我希望带有文本的粉红色图形显示在使用 ::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>

Answer 1

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

Answer 2

添加位置：相对于 figcaption 并且还更改了 after 元素和 figcaption 上的 z-index。

z-index 属性仅适用于固定、绝对或相对 div。所以这就是为什么你需要 figcaption 上的相对位置，甚至 z-index:2 在这种情况下也可以工作。不需要1000的价值。同样，您只需要为关闭后图标设置一个更高的值。所以 zindex 3 也可以。

.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: 3;
  width: 2rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
}
figcaption {
  position: relative;
  z-index: 2;
  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>

Answer 3

尝试将 figcaption 位置设置为 relative。

优先考虑两个绝对元素

Prioritising two absolute elements

html

css

absolute