Click on button underneath a container that covers it - html

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>

Answer 1

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>

Answer 2

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>