当.hero（z-index：0）时，为什么在.hero背景和.hero文本之间出现此覆盖（z-index：-1）？它不应该落后于两者吗？ [重复]

Using z-index, this code achieves the desired display order (background image, overlay, text). What I don't understand is how? .hero {z-index: 0;} applies to both the background image and the text. How come when we add the overlay with .hero::before {z-index: -1;}, it injects in between those two? (screenshot attached below)

的CSS

.hero {
    width: 100%;
    height: 100vh;
    background: url("./images/hero_background.jpg") center no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative; /* why? */
    z-index: 0;
}

.hero::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: var(--purple-transparent-alt);
    z-index: -1;
}