Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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也会起作用。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

尝试将figcaption位置设置为relative。

优先考虑两个绝对要素

3 个答案: