此问题已在此处有答案：

Why can't an element with a z-index value cover its child?（4个答案）
6天前关闭
我知道z-index的基础知识，并在实践中使用它，并写了下面的代码：

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #141214;
        }

        .card{
            /* position: relative; */
            width: 350px;
            height: 450px;
            background-color: #282729;
            border-radius: 15px;
            z-index: 1;        }
        .img{
            position: relative;
            width: 80%;
            background-color: #AAA;
            /* z-index: 1; */
        }
        .img::before{
            position: absolute;
            content: '';
            left: -70%;
            top: 10%;
            width: 350px;
            height: 350px;
            background-color: #9BDB23;
            z-index: -1;
        }
        img{
            max-width: 100%;
        }

<div class="card">
        <div class="img">
            <img src="shoes.png" alt="A Shoe">
        </div>
        <div class="content">
            <h3>Nike Shoes</h3>
            <div class="size">
                <p>size</p>
                <a href="#" class="size">7</a>
                <a href="#" class="size">8</a>
                <a href="#" class="size">9</a>
                <a href="#" class="size">10</a>
            </div>
            <div class="color">
                <p>color</p>
                <div class="color green"></div>
                <div class="color blue"></div>
                <div class="color red"></div>
            </div>
            <a href="#" class="buy">buy now</a>
        </div>
    </div>

现在，主要的问题是：（1）当img：：before被分配了z-index时：-1，那么它被发送到.card后面（根据docs，任何具有负z-index的元素都被发送到其父元素后面。但是，在这里，.img是直接的父容器，那么为什么：：before被发送到.card之后而不是.img之后呢？）
(2)当img：：before被分配了z-index时：-1和.card z-index：1，则：：before将在.img和.content之后发送
(3)当img：：before被分配了z-index时：-1，.card z-index：1（可选）和.img z-index：1，然后：：before被发送到后面，但在. img之上。
这样，对于这个场景，还有其他z索引的组合，这对我来说很难。有人能帮我吗？