Search code examples
cssz-index

Z-index not working, even with position absolute

Doing a Next.js project, here's the issue:

enter image description here

The component:

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>
  );
}

And here's the scss module:

.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;
  }
}

Basically, .verticalCircles overwrite the .description div. I've removed the Slider and still, it gets over. I've tried everything from this website: https://coder-coder.com/z-index-isnt-working/

  • Added position relative to Slider, teamBox (div), .description

Another thing, .verticalCircles goes behind .join ("Ready to join us?"), so it seems to have something to do with the way .teamSection or .teamBox is structured...

Solution

  • I figure it out! The problem was here:

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

    This div needed a className and a background of white, the z-index was working perfectly :)