滚动容器内卡片图片无法置于卡片上方的问题求助

我制作了一个基于卡片的水平滚动器，卡片可在scrolling-wrapper容器内正常滚动。但为our-member-owner-card-image元素设置z-index后，图片仍被card元素遮挡，无法置于卡片上方，特此寻求解决方法。

相关代码 #

CSS代码 #

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    height: 331px;
    width: 100%;
    padding-inline: 40px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 0;
  }

  .scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }

  .card {
    width: 100%;
    flex: 0 0 auto;
    background-color: green;
    border-radius: 20px;
    position: relative;
    margin-right: 10px;
  }

  .our-member-owner-card-image {
    position: absolute;
    top: -30px;
    z-index: 10;

  }

  .card-content {
    position: absolute;
    padding-top: 38px;
  }

  .member-detail {
    padding-top: 55px;
    line-height: 1.7;

  }

  .member-detail h3 {
    text-align: center;
    color: #263244;
    font-weight: 700;
    font-family: 'Lato';
  }

  .member-detail p {
    text-align: center;
    color: #737C89;
  }

  .member-description {
    padding-inline: 20px;
    color: #263244;
    line-height: 1.6;
    padding-top: 9px;
    font-weight: 500;
    font-size: 17px;
  }

  .member-description span {
    color: red;
    text-decoration: underline;
  }

HTML代码 #

<div class="scrolling-wrapper">
            <div class="card">
              <div class="our-member-owner-card-image">
                <img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
              </div>
              <div class="card-content">
                <div class="member-detail">
                  <h3>Sohaib</h3>
                  <p>Chairman</p>
                </div>
                <div class="member-description">
                  Sohaib Ashraf has extensive work experience during his career
                  of more than 25 years in the financial services sector.<span
                    >Read more</span
                  >
                </div>
              </div>
            </div>
            <div class="card">
                <div class="our-member-owner-card-image">
                <img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
              </div>
              <div class="card-content">
                <div class="member-detail">
                  <h3>Sohaib Ashraf</h3>
                  <p>Chairman</p>
                </div>
                <div class="member-description">
                  Sohaib Ashraf has extensive work experience during his career
                  of more than 25 years in the financial services sector.<span
                    >Read more</span
                  >
                </div>
              </div>
            </div>
          </div>

解决方法 #

问题根源 #

card-content是绝对定位元素，且在HTML结构中位于图片元素之后。默认情况下，同层级的绝对定位元素会按照DOM顺序堆叠，后面的元素会覆盖前面的，因此即便图片设置了z-index:10，依然会被card-content遮挡。

修复步骤 #

给card-content添加z-index属性，设置一个低于图片z-index的值（比如1），确保图片的层叠顺序更高：

.card-content {
    position: absolute;
    padding-top: 38px;
    z-index: 1; /* 添加这一行 */
}

同时，确保.card元素保持默认的z-index:auto，避免创建新的堆叠上下文干扰子元素的层叠关系。

修改后的完整CSS代码 #

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    height: 331px;
    width: 100%;
    padding-inline: 40px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 0;
  }

  .scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }

  .card {
    width: 100%;
    flex: 0 0 auto;
    background-color: green;
    border-radius: 20px;
    position: relative;
    margin-right: 10px;
  }

  .our-member-owner-card-image {
    position: absolute;
    top: -30px;
    z-index: 10;

  }

  .card-content {
    position: absolute;
    padding-top: 38px;
    z-index: 1; /* 修改处 */
  }

  .member-detail {
    padding-top: 55px;
    line-height: 1.7;

  }

  .member-detail h3 {
    text-align: center;
    color: #263244;
    font-weight: 700;
    font-family: 'Lato';
  }

  .member-detail p {
    text-align: center;
    color: #737C89;
  }

  .member-description {
    padding-inline: 20px;
    color: #263244;
    line-height: 1.6;
    padding-top: 9px;
    font-weight: 500;
    font-size: 17px;
  }

  .member-description span {
    color: red;
    text-decoration: underline;
  }

内容的提问来源于stack exchange，提问作者Sohaib Ashraf