标题按钮出现在汉堡菜单上答案

【问题标题】：Header button appears on the hamburger menu标题按钮出现在汉堡菜单上
【发布时间】：2023-01-26 23:44:34
【问题描述】：

我有一个标题按钮，看起来像这样

这是代码：

.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);
    }

然后我有一个这样的汉堡菜单：

这是代码：

<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;

}

当我打开菜单时，它看起来像这样：

当我评论 backdrop-filter: blur(12px) 时，它工作正常但我需要模糊按钮。如何解决这个问题？

【问题讨论】：

标签： css

【解决方案1】：

增加覆盖类的 z-index

z-index:9999999;

【讨论】：