Z-index 不工作，即使位置绝对

Question

做一个Next.js项目，问题如下：

组件：

function Team() {
 
     const VerticalCircles = () => {
    let circles = [1, 2, 3, 4];
    return circles.map(() => <div className={styles.circle} />);
  };

  return (
      <div className={styles.team}>
        <div className={styles.diagonalSVG}></div>
        <div className={styles.title}>
          <h1>Meet the team</h1>
          <p>Responsible for creating amazing memories</p>
        </div>
        <div className={styles.teamSection}>
          <Slider {...settings}>
            {teamMembers.map((member) => (
              <div className={styles.teamBox} key={member.id}>
                <span className={styles.diagonalSpan} />
                <Image src={member.src} width={300} height={450} />
                <div>
                  <div className={styles.presentation}>
                    <h4>{member.name}</h4>
                    <p>{member.username}</p>
                  </div>
                  <div className={styles.description}>
                    <p>{member.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </Slider>
        </div>
        <div className={styles.verticalCircles}>
          <VerticalCircles />
        </div>
        <div className={styles.join}>
          <h2>Ready to join us?</h2>
          <p>Book a walk and start your journey with Novanoid.</p>
          <button>BOOK A WALK</button>
        </div>
      </div>
  );
}

这是 scss 模块：

.team {
  min-height: 100vh;
}
.diagonalSVG {
  background: $green;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  padding: 40px 0px;
  height: 100px;
}
.title {
  text-align: center;
  & h1 {
    font-size: 70px;
    margin-bottom: 0;
  }
  & p {
    font-weight: 100;
    color: $grey;
    font-size: 15.5px;
    margin-top: -10px;
  }
}

.verticalCircles {
  position: absolute;
  top: 120%;
  right: 50%;
  z-index: -1;
  & .circle {
    margin: auto;
    margin-bottom: 50px;
    height: 3px;
    width: 3px;
    background-color: $dark;
    border-radius: 50%;
  }
}

.teamSection {
  margin: 50px 0 0 0;
}

.teamBox {
  position: relative;
  z-index: 100;
  overflow-x: hidden;
  cursor: pointer;
  max-width: 240px;
  max-height: 500px;
  text-align: center;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.011),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.016),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.02),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.024),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.029),
    100px 100px 80px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease, max-height 1s ease;

  & h4 {
    margin-top: 15px;
    margin-bottom: 0;
    color: $green;
    font-size: 25px;
    z-index: 1;
  }
  & p {
    color: $grey;
    font-weight: 100;
    font-size: 15px;
    padding-bottom: 20px;
  }
  & img {
    filter: grayscale(100%);
    transition: 0.2s ease;
    z-index: -2;
  }
  & .diagonalSpan {
    position: absolute;
    background: white;
    top: 310px;
    content: "";
    width: 110%;
    height: 50px;
    right: -20px;
    transform-origin: 100% 100%;
    transform: rotate(-10deg);
    z-index: -1;
  }
  & .description {
    display: none;
    text-align: start;
    font-size: 15px;
    color: $dark;
    padding: 0 15px;
    font-weight: 100;
    line-height: 30px;
    -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  &:hover {
    transform: scale(1.05);
    max-height: 800px;
    & img {
      filter: grayscale(0%);
    }

    & .presentation {
      display: none;
    }
    & .description {
      display: block;
    }
  }
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.join {
  text-align: center;
  & h2 {
    font-size: 50px;
  }
  & p {
    font-weight: 100;
  }
  & button {
    @include novanoid-btn(white, $green);
    margin: 10px 0 60px 0;
  }
}

基本上，.verticalCircles 覆盖 .description div。我已经删除了滑块，但它仍然结束了。我已经尝试了这个网站上的所有内容：https://coder-coder.com/z-index-isnt-working/

添加了相对于 Slider、teamBox (div)、.description

还有一个，.verticalCircles在.join后面（“Ready to join us?”），所以好像有点意思与 .teamSection 或 .teamBox 的结构方式有关...

Answer 1

在您的代码中添加以下 css：

.team {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

Answer 2

我明白了！问题出在这里：

     <div>
         <div className={styles.presentation}>
                <h4>{member.name}</h4>
                <p>{member.username}</p>
              </div>
              <div className={styles.description}>
                <p>{member.description}</p>
              </div>
     </div>

这个 div 需要一个类名和白色背景，z-index 工作得很好 :)

Z-index 不工作，即使位置绝对

Z-index not working, even with position absolute

css

z-index