Prioritising two absolute elements - html

Question

I have two absolute elements, which overlap. I would like to have one to show above the other. In the below example, I want the pink figure with text to show above the pseudo-element created with ::before.
I've tried the z-index, but it doesn't seem to help.
Any ideas?
.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>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>

Answer 1

For z-index to work element has to have a position other than static. In your case element needs to have 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>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>

Answer 2

Add position: relative to figcaption and also changed z-index on the after element and the figcaption.
z-index property only works on fixed, absolute or relative divs. So thats why you need the relative position on figcaption and even z-index:2 will work in that case. No need of 1000 value. Similarly, you need just one higher value for the after close icon. So zindex 3 will also work.
.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>
<figcaption>
Ipsum lorem ...
</figcaption>
</figure>
</div>
<div class="lightbox" id="text2">
<figure>
<figcaption>
Some latin text in textbox2 ...
</figcaption>
</figure>
</div>
</div>

Answer 3

Try setting the figcaption position to relative.