javascripthtmlcssgsapsmooth-scrolling

z-index not working with elements linked to gsap animation

I am not able to show the fixed button when scrolling over images, I tried different things but nothing seems to work even if I z-index:999999999999999;.

Image uses smooth scrolling with gsap, now sure what should be change or if z-index property doesn't work with transform: translate(-50%, -50%)..... property which changes for image wrapper when scrolling.

const select = e => document.querySelector(e);
const selectAll = e => document.querySelectorAll(e);

const panels = selectAll(".panel")

function startAnim() {
gsap.registerPlugin(ScrollTrigger);
  
  panels.forEach((panel, i) => {
    let imageWrappers = panel.querySelectorAll(".col__image-wrap")
    console.log(imageWrappers)
    
    gsap.fromTo(imageWrappers, {
      y: "-30vh"
    }, {
      y: "30vh",
      scrollTrigger: {
        trigger: panel,
        scrub: true,
        start: "top bottom", // position of trigger meets the scroller position
      },
      ease: 'none'
    })
  })
}

function init() {
  startAnim();
}

window.onload = () => init()



const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
.enquire-btn{ background-color: #222; color: #fff; min-width:150px; 
  padding:10px 25px; border-radius: 100px; text-decoration: none; 
  font-weight: normal; font-size: 14px;
  position: -webkit-sticky;
  position: sticky;
  position:fixed;
  z-index:99999999999999999999; 
}
body{background:#fff;}
.header{hight:60px; min-height:60px; background:#fff; ;
}
.h-line{height:1px; background:#000; margin-top:15px; }
.hero-section{margin-top:200px; z-index:20;}
.hs {
  text-transform: uppercase;
  font-family:Overusedgrotesk,sans-serif;
  color:#222;
  font-weight:200;
 letter-spacing: -5px;
font-size: clamp(2.1875rem, 0.9037rem + 5.4054vw, 9.6875rem);
}
.hs:first-child {font-weight:600; padding-right:10px;}


*, .panel, .project {
  padding: 0;
  margin: 0;
}

/* Full width section */
.panel {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 90vh;
  overflow: hidden;
  margin-top: 0vh;
  margin-bottom:0vh;
/*     background-color: red; */
}

/* In charge of setting the height/width/area */
.column {
  flex-basis:100%;
  position: relative;
  overflow: hidden;
}

/* Extra height for the parallax effect */
.col__image-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 160vh;
    background-color: red;
}

/* make sure it covers the total space */
.img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.intro-section{min-height:300px; background:grey; padding:30px 0px;}
.intro-section .section-heading {
  position:relative; withd:100%; padding:30px; 
  color:#fff; font-size:18px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<header class="container-fluid text-center header animate__animated animate__fadeIn animate__delay-800ms">
  <div class="row justify-content-evenly vertical-align p-3 ">
    <div class="col-4 align-middle">AHRE</div>
    <div class="col-4 ms-auto">      <a class="enquire-btn animate__animated animate__fadeInUp animate__slower">CONTACT US</a></div>
</div>
    <div class="h-line animate__animated animate__slideInLeft animate__delay-900ms"></div>
  </div>
</header>
<section class="container-fluid hero-section">
  <span class="hs animate__animated animate__fadeInUp animate__delay-1s">The Residences</span>
</section>
<section class="container-fluid section2 p-0">
   <div class="panel panel--1">
    <div class="column">
      <div class="col__image-wrap">
      <img class="img img--1" src="https://assets-global.website-files.com/6594c68e852eed392813f26c/65968d19211871302df255cc_home-img-07.webp" />
    </div>
    </div>
  </div>
 
 
</section>
<section class="intro-section">
  <div> <span class="section-heading">Introduction</span></div>
</section>

<script src="https://unpkg.com/lenis@1.1.3/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

Solution

  • The button you are trying to raise up using z-index is in a different stacking context (more information on stacking context can be found using that link) to the section that is currently overlapping it. Because of this, no matter how high you make the z-index of the button, as you have seen, you will not be able to raise it above the image. Increasing the z-index is raising the button in relation to the header it sits in.

    What you need to do is raise the z-index of the header to sit above the section(s) that follow. In this example codepen showing the solution you can see all I have changed is I have added the following lines to your CSS and commented out the button's z-index value to show it is not needed:

    header {
    z-index: 1;
    position: relative;
}