Click on button underneath a container that covers it

Question

I am trying to make it so that the review button underneath the chat overlay container can be clicked when the chat overlay container is on top. The size of the chat overlay container can't be changed. I have tried with stacking options z-index. I thought about the CSS option pointer-events but the x in the top right and the circle chat button needs to remain clickable. Any help is much appreciated thanks.

The following is an image in inspector with the chat overlay container highlighted.

The following is simplified version of how the html is structured for the chat overlay and the card container.

<div class="card">
   <p class="title">example.com</p>
   <button class="review">Review</button>
</div>

<div class="overlay">
   <div class=help-text>
      <button class="dismiss-help">X</button>
      <p>Got any questions....</p>
   </div>
   <span class="overlay-launcher">
     <button class="launcher-button">Circle</button>
   </span>
</div>

score 0 · Answer 1 · edited Mar 08 '22 at 00:14

0

I would continue exploring the use of pointer-events.

pointer-events is an inherited property, so if a value isn't explicitly set, it will inherit the computed value from it's parent.

Try pointer-events: none on the chat overlay, but pointer-events: auto on the children that should remain clickable. eg close button and toggle chat button (or one of their common ancestors).

// Not required. Only here to demonstrate click events
document
.querySelectorAll('button')
.forEach(button => 
  {
  button.addEventListener('click', (e) => 
    {
    console.log(`clicked ${e.currentTarget.textContent.trim()}`)
    })
  })

.overlay {
  background     : rgba(128, 128, 128, 0.5);
  position       : absolute;
  top            : 0;
  pointer-events : none;
  outline        : 1px solid blue;
  }
.overlay button {
  pointer-events : auto;
  }

<div class="card">
  <p class="title">example.com</p>
  <button class="review">Review</button>
</div>

<div class="overlay">
  <div class=help-text>
    <button>X</button>
    <p>Got any questions....</p>
  </div>
  <span class="overlay-launcher">
     <button class="launcher-button">Circle</button>
   </span>
</div>

edited Mar 08 '22 at 00:14

Mister Jojo

20,093
6
21
40

answered Feb 05 '22 at 01:42

ksav

20,015
6
46
66

I follow what you suggest and I can leave only the the X and chat launcher clickable. But the area underneath is still unclickable – user2805620 Feb 05 '22 at 03:01
What is the area underneath? The Review button? – ksav Feb 05 '22 at 03:10
It is a card container that contains a button – user2805620 Feb 05 '22 at 08:13
Can you click on the review button in the above example? – ksav Feb 05 '22 at 09:21
It works in your example. But that is because your overlay content upon chrome inspect in blue does not overlap the review button. Only the padding which is green in chrome inspect overlaps the review button. – user2805620 Feb 06 '22 at 00:48
I don't think that is correct. Padding on `.overlay` has no impact. – ksav Feb 06 '22 at 03:56
Now there is no padding and you can still click every button. – ksav Feb 06 '22 at 04:02
Ok so I eventually found the parent div in which doing `pointer-events:none` works and I can click the review button on overlap. But the overlay and its associated html is loaded in with an `` which has issues inheriting/accessing styles. Can't seem to override it to make just the buttons clickable. – user2805620 Feb 06 '22 at 04:09
https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe – ksav Feb 06 '22 at 04:11

score -1 · Answer 2 · answered Feb 05 '22 at 10:04

z-index and position:relative help the ".help-text",".launcher-button" classes to stay on top of other contents.

.overlay{
  display:flex;
  flex-direction:column;
  align-items:end;
  width:fit-content;
  
}
.help-text{
  background:white;
  width:fit-content;
  box-shadow: 1px 1px 5px;
  border-radius: 5px;
  display:flex;
  flex-direction:column;
  align-items:end;
  z-index:1;
  position:relative;
  /*    z-index and position:relative help .help-text to stay on top of other contents  */
}

.help-text>p{
  font-family:sans-serif;
}
.dismiss-help{
  background-color:transparent;
  border:none;
}

.launcher-button{
  width:3rem;
  aspect-ratio:1;
  border-radius:50%;
  border:none;
  background-image:linear-gradient(to left,rgba(0,100,180,1) 30%,rgba(0,0,255,1));
  margin-top:1rem;
  z-index:1; 
  position:relative;
/*    z-index and position:relative help launcher button to stay on top of other contents  */
}

#samplebtn{
  position:absolute;
  top:40%;
  left:90px;
  height:2rem;
}

<div class="overlay">
   <div class=help-text>
      <button class="dismiss-help">X</button>
      <p>Got any questions....</p>
   </div>
   <span class="overlay-launcher">
     <button class="launcher-button">Circle</button>
   </span>
</div>
<button id="samplebtn">Review
</button>

Click on button underneath a container that covers it

2 Answers2