为何div的z-index未正常生效？勋章无法置于卡片后方求助

我正在搭建一个包含「Top teachers」板块的网站，该板块有3个卡片组件，希望将.medal元素置于.card元素后方，但当前勋章显示在卡片前方。我已尝试调整z-index、修改position属性并使用!important，问题仍未解决。

.card元素设置了position: relative和z-index: 1，这会创建一个独立的堆叠上下文。在这个上下文里，所有子元素的z-index都只会相对于父元素生效——哪怕给.medal设z-index: -1，它也只会在.card的内容层级里，无法真正跑到卡片的后方。

提供两种可行的解决方案，按需选择：

方案一：调整DOM结构，将勋章移到卡片外部 #

把.medal从.card内部提取为同级元素，通过直接控制不同元素的z-index来实现层级关系：

修改后的HTML #

<div id="champions-container">
  <div class="champions-heading">
    <img src="css/img/logo.png" alt="" srcset=""><h2>Top teachers</h2>
  </div>
  <div class="card-container">
    <!-- 卡片1 -->
    <div class="card card-1">
      <img src="css/img/avatar.png" alt="" srcset="">
      <a href="#"><h3>Name Surname</h3></a>
      <p>Čj, Aj, M, Ch</p>
      <div class="row">
        <img src="css/img/emoji.svg" alt="" srcset="">
        <span>300 CZK / h</span>
      </div>
      <a href="#" class="p-btn">Send message</a>
    </div>
    <div class="medal medal-1">
      <img src="css/img/silver.png" alt="" srcset="">
    </div>

    <!-- 卡片2 -->
    <div class="card card-2">
      <img src="css/img/avatar.png" alt="" srcset="">
      <a href="#"><h3>Name Surname</h3></a>
      <p>Čj, Aj, M, Ch</p>
      <div class="row">
        <img src="css/img/emoji.svg" alt="" srcset="">
        <span>300 CZK / h</span>
      </div>
      <a href="#" class="p-btn">Send message</a>
    </div>
    <div class="medal medal-2">
      <img src="css/img/gold.png" alt="" srcset="">
    </div>

    <!-- 卡片3 -->
    <div class="card card-3">
      <img src="css/img/avatar.png" alt="" srcset="">
      <a href="#"><h3>Name Surname</h3></a>
      <p>Čj, Aj, M, Ch</p>
      <div class="row">
        <img src="css/img/emoji.svg" alt="" srcset="">
        <span>300 CZK / h</span>
      </div>
      <a href="#" class="p-btn">Send message</a>
    </div>
    <div class="medal medal-3">
      <img src="css/img/bronze.png" alt="" srcset="">
    </div>
  </div>
</div>

调整后的SCSS #

#champions-container{
    padding: 8rem;
    padding-top: 0;
    .champions-heading{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-bottom: 6rem;
        h2{
            font-size: 4rem;
            text-transform: uppercase;
        }
        img{
            width: 5rem;
            margin-right: 2rem;
        }
    }
    .card-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* 设置为勋章的定位父级 */
      }
      
      .card {
        width: 40rem;
        padding: 4rem;
        border-radius: 10px;
        background-color: $white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 1.5rem;
        z-index: 2; /* 确保卡片在勋章上方 */
        img{
            width: 32rem;
            height: 32rem;
            object-fit: cover;
            border-radius: 10px;
        }
        h3{
            font-size: 2.8rem;
            margin: 0.5rem 0rem;
            margin-top: 1.5rem;
        }
        p{
            margin: 0.5rem 0rem;
            font-size: 2.2rem;
            font-weight: bold;
        }
        .row{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin: 0.5rem 0rem;
            img{
                width: 5rem;
                height: 5rem;
            }
            span{
                font-size: 2.2rem;
                font-weight: bold;
            }
        }
        .p-btn{
            text-align: center;
            width: 80%;
            margin: 0.5rem auto;
            margin-bottom: 0;
        }
      }

      /* 勋章样式 */
      .medal{
          position: absolute;
          z-index: 1; /* 层级低于卡片 */
          width: 20rem;
          img{
              width: 100%;
              object-fit: contain;
          }
      }
      /* 定位每个勋章到对应卡片下方 */
      .medal-1{
          bottom: -10rem;
          left: calc(50% - 28rem);
          transform: scale(0.85); /* 和卡片缩放比例匹配 */
      }
      .medal-2{
          bottom: -10rem;
          left: 50%;
          transform: translateX(-50%);
      }
      .medal-3{
          bottom: -10rem;
          right: calc(50% - 28rem);
          transform: scale(0.85);
      }
      
      .card-1 {
        transform: scale(0.85);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        transition: ease 0.3s all;
        &:hover{
            transform: scale(0.90);
            /* 同步勋章缩放 */
            ~ .medal-1{
                transform: scale(0.90);
            }
        }
      }
      
      .card-2 {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        transition: ease 0.3s all;
        &:hover{
            transform: scale(1.05);
            ~ .medal-2{
                transform: translateX(-50%) scale(1.05);
            }
        }
      }
      
      .card-3 {
        transform: scale(0.85);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        transition: ease 0.3s all;
        &:hover{
            transform: scale(0.90);
            ~ .medal-3{
                transform: scale(0.90);
            }
        }
      }   
}

方案二：移除卡片的z-index，取消独立堆叠上下文 #

如果不想修改DOM结构，只需去掉.card的z-index设置，让它不创建独立堆叠上下文，此时.medal的z-index: -1就能跑到卡片后方：

修改后的SCSS（仅调整.card部分） #

.card {
    width: 40rem;
    padding: 4rem;
    border-radius: 10px;
    background-color: $white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 1.5rem;
    /* 移除原有z-index: 1; 或设置为z-index: auto; */
    // z-index: 1;

    /* 其他样式保持不变 */
    img{
        width: 32rem;
        height: 32rem;
        object-fit: cover;
        border-radius: 10px;
    }
    h3{
        font-size: 2.8rem;
        margin: 0.5rem 0rem;
        margin-top: 1.5rem;
    }
    p{
        margin: 0.5rem 0rem;
        font-size: 2.2rem;
        font-weight: bold;
    }
    .row{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0rem;
        img{
            width: 5rem;
            height: 5rem;
        }
        span{
            font-size: 2.2rem;
            font-weight: bold;
        }
    }
    .p-btn{
        text-align: center;
        width: 80%;
        margin: 0.5rem auto;
        margin-bottom: 0;
    }
    .medal{
        position: absolute;
        bottom: -23rem;
        transform: translateX(-4rem);
        z-index: -1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img{
            width: 20rem;
            object-fit: contain;
        }
      }
}

内容的提问来源于stack exchange，提问作者Jiří Nováček