Html Question posted in
Some basic documentation can be found here.

Html – How to make elements clickable in sticky and negative z-index container?

I have a section that is positioned sticky with a negative z-index, creating a nice reveal effect. Inside this section, there is a button that cannot be clicked due to the negative z-index. It always just detects the body…
This is the button
So how can I keep this effect and the button?

<section class="scroll-images-section">
      <div class="grid-columns">
      <--!more content here-->
      </div>
      <div class="gallery-btn-container">
        <button class="gallery-btn">Galerie</button>
      </div>
</section>
.scroll-images-section {
  z-index: -1;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.gallery-btn-container {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  z-index: 10 !important;
}

.gallery-btn {
  z-index: 1200 !important;
  width: 160px;
  height: 45px;
  color: #1b1d1c;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Darker Grotesque !important;
  font-size: 1.4rem;
  cursor: pointer;
}

I have tried to add "pointer-events" on several components, wrapped that button inside a container with a positive z-index…

Tags:

2

Answers


  1. 0

    Try separate the button’s container from the section with the negative z-index, therefore by setting a higher z-index and pointer-events so that the button is clickable. The code should look something like the following (based on the one you sent):

    <section class="scroll-images-section">
      <div class="grid-columns">
      <--!more content here-->
      </div>
      <div class="gallery-btn-container">
        <button class="gallery-btn">Galerie</button>
      </div>
</section>
.scroll-images-section {
  z-index: -1;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.gallery-btn-container {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  z-index: 10;
 pointers-events: auto;
}

.gallery-btn {
  z-index: 11;
  width: 160px;
  height: 45px;
  color: #1b1d1c;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Darker Grotesque !important;
  font-size: 1.4rem;
  cursor: pointer;
 /* You could also try adding some new fonts too (just an advice, not relevant to the question */
}
    Login or Signup to reply.
  2. 0

    The button is a child element and the section is the parent element, so changing z-index for gallery-btn or gallery-btn-container will only work relative to the parent unfortunately.

    One alternative is to make the button and section sibling elements.

    <section class="scroll-images-section">
      <div class="grid-columns">
      <--!more content here-->
      </div>
</section>

 <div class="gallery-btn-container">
    <button class="gallery-btn">Galerie</button>
 </div>

    But this will take some more fiddling with your other components.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search