Header button appears on the hamburger menu - css

Question

I have a header button which looks like this
here is the code:
.button {
width: 148px !important;
min-height: 40px !important;
font-family: 'Teko', sans-serif !important;
font-weight: 500 !important;
font-size: 20px !important;
background: transparent !important;
margin-bottom: 60px !important;
backdrop-filter: blur(12px);
}
and then I have a hamburger menu like this:
here is the code:
<div className={styles.overlay}>
<div className={styles.content}>
<span className={styles.openedArrow2}></span>
<h1 onClick={onClick2}>{'Main Menu'}</h1>
{pagination && (
<>
<span className={styles.pagination}>.</span>
<h2 onClick={onClick3}>Services</h2>
</>
)}
</div>
</>
)}
<div onClick={onClick} className={styles.close}></div>
</div>
{children}
</div>
</div>
.overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 200vh;
overflow: auto;
background-color: rgba(18, 34, 45, 0.65);
}
.content{
position: absolute;
width:294px;
height: 640px;
background: rgb(62,75,83, 0.88);
backdrop-filter: blur(15px);
padding: 24px 20px 0 42px;
top:0;
right: 0;
line-height: 2;
}
When I open the menu, it looks like this:
When I comment the backdrop-filter: blur(12px), it works fine but I need the button to be blurred. How to fix this?

Answer 1

Increase the z-index of your overlay clas
z-index:9999999;