Click on button underneath a container that covers it-CodePudding

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

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

CodePudding user response：

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()}`)
  })
})

.wrapper {
  position: relative
}

.overlay {
  background: rgba(128, 128, 128, 0.5);
  position: absolute;
  top: 0;
  padding: 50px;
  pointer-events: none;
}

.overlay button {
  pointer-events: auto;
}

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

CodePudding user response：

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 >
   <div class=help-text>
      <button >X</button>
      <p>Got any questions....</p>
   </div>
   <span >
     <button >Circle</button>
   </span>
</div>
<button id="samplebtn">Review
</button>