background overlay and z-index - background

Question

You know how we make code like below to make an overlay for the background image or color.
HTML
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
CSS
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1
}
I understand that I have to put z-index to make the anchor tags clickable on the container. But also confused that why the overlay is still showing over the container while we put the z-index to -1.
How come the overlay is visible while the z-index is -1? How come only the text and anchor tag are getting z-index of 1?

Answer 1

Edit: I think i got your idea.
As mentioned here by Sir Praveen Kumar , dont use negative z-index, use only positive one i.e z-index:1 and z-index:2 .
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 2;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: 1;
}
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>

Answer 2

The reason why pseudo element wasn't entirely under the parent div was because it is a descendants of their associated element. So if you ever want to put the pseudo elements under the parent element, you will have to consider making another div on top of the parent element. Here is the post that I referred to figure my question.