盒子阴影重叠在其下方的卡片，z-index 不起作用

Question

这就是我想要实现的设计：

• 每张卡片都有一个像这样的盒子阴影：

box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);

这是每张卡片的 CSS：

.card{
    width: 365px;
    padding: 32px;
    box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
    border-radius: 16px;
    position: relative;
}

• 它们被放置在一行内，每行都有一个类 row 和 row-(n)

**这是我迄今为止所能做到的：** 我想说它非常接近，但这是不对的...... 卡片顶部的框阴影与其下方的卡片重叠。

这是整个部分的 HTML 结构

我也上传到codePen

https://codepen.io/theCodeDesigner/pen/wvORXdP

      <section class="limitations">
        <div class="row-1 row">

          <div class="limitation-text">
            <h2 class="u-heading-l">Limitations of BMI</h2>
            <p class="u-body-m">
              Although BMI is often a practical indicator of healthy weight, it is not suited for
              every person. Specific groups should carefully consider their BMI outcomes, and in
              certain cases, the measurement may not be beneficial to use.
            </p>
          </div>

          <div class="card card-1">
            <div>
              <img src="./assets/images/icon-gender.svg" alt="">
              <h3 class="u-heading-s">Gender</h3>
            </div>
            <p class="u-body-m">
              The development and body fat composition of girls and boys vary with age. Consequently,
              a child's age and gender are considered when evaluating their BMI.
            </p>
          </div>
        </div>
       
        <div class="row-2 row">
          <div class="card card-2">
            <div>
              <img src="./assets/images/icon-age.svg" alt="">
              <h3 class="u-heading-s">Age</h3>
            </div>
            <p class="u-body-m">
              In aging individuals, increased body fat and muscle loss may cause BMI to underestimate
              body fat content.
            </p>
          </div>
          <div class="card card-3">
            <div>
              <img src="./assets/images/icon-muscle.svg" alt="">
              <h3 class="u-heading-s">Muscle</h3>
            </div>
            <p class="u-body-m">
              BMI may misclassify muscular individuals as overweight or obese, as it doesn't
              differentiate muscle from fat.
            </p>
          </div>
        </div>
        <div class="row-3 row">
          <div class="card">
            <div>
              <img src="./assets/images/icon-pregnancy.svg" alt="">
              <h3 class="u-heading-s">Pregnancy</h3>
            </div>
            <p class="u-body-m">
              Expectant mothers experience weight gain due to their growing baby. Maintaining a
              healthy pre-pregnancy BMI is advisable to minimise health risks for both mother
              and child.
            </p>
          </div>
          <div class="card">
            <div>
              <img src="./assets/images/icon-race.svg" alt="">
              <h3 class="u-heading-s">Race</h3>
            </div>
            <p class="u-body-m">
              Certain health concerns may affect individuals of some Black and Asian origins at
              lower BMIs than others. To learn more, it is advised to discuss this with your
              GP or practice nurse.
            </p>
          </div>
            </div>
        </div>
      </section>

这是CSS

.limitations{
    max-width: 1160px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.limitation-text{
    width: 564px;
   
}

.limitation-text h2{
    margin-bottom: 35px;
}



.card{
    width: 365px;
    padding: 32px;
    box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
    border-radius: 16px;
    position: relative;
}


.row{
    display: flex;
    gap: 32px;
}

.row-1{
    justify-content: space-between;
    margin-bottom: 32px;
    padding-right: 100px ;
}

.row-2{
    justify-content: end;
    margin-bottom: 24px ;
}

.row-3{
    justify-content: center;
    margin-bottom: 32px;
}

.card-1{
    z-index: 1;
    position: relative;
}

.card-2, .card-3{
    z-index: 2;
    position: relative;
}

.card > div{
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 16px;
}

我尝试使用 z-index 但没有成功。然后我添加了相对于所有卡片的位置。 还有按升序排列的 z 索引，但它不起作用，我也可以提供 github 存储库链接：

https://github.com/GazdagB/fm-bmi-calculator

Answer 1

我遇到了类似的问题并为适合我的卡片设置背景颜色。奇怪的是，我在你的 codepen 中尝试过它，它适用于第 2 行，但不适用于第 3 行。希望这会有所帮助。