如何不使用position: fixed实现菜单悬浮且跟随导航栏？

我有一个点击展开的菜单，当前菜单在relative定位的div内展开。由于该div是导航栏，高度有限，菜单展开后会出现滚动条。

我希望菜单能悬浮在所有元素上方，但尝试将菜单的position从absolute改为fixed后，页面滚动时菜单会固定在原地，和随页面滚动的导航栏出现间隙。我还试过把父div设为absolute，菜单表现正常，但导航栏按钮会和“Username”按钮重叠，失去响应式特性，调整margin也没用。

核心思路是保留菜单的absolute定位，同时移除导航栏的overflow: auto属性——这是导致菜单被截断出现滚动条的关键原因。另外需要调整菜单的z-index确保它能悬浮在其他元素上方。

具体修改步骤：

• 移除.navbar中的overflow: auto，避免导航栏限制内部绝对定位元素的显示范围
• 提高.pagesContainer的z-index值，确保菜单能覆盖页面其他内容
• 保持父容器的relative定位，让菜单始终锚定在“Username”按钮下方

修改后的CSS代码 #

/* 基础样式，省略FontAwesome及部分细节样式 */
/* 类名规则参考Bootstrap：
   .fs-* = 字体大小
   .m-* = 外边距，.mr-* = 右外边距
   .d-flex = display: flex
*/

body {
    margin: 0px;
}

.d-flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.grow {
    flex-grow: 1;
}

.gap-1 {
    gap: 1rem;
}

.navbar {
    width: 100%;
    /* 移除overflow: auto，避免截断菜单 */
    z-index: 9999;
    min-height: 100px;
}

.m-nav-container {
    margin: 2rem 2rem 3rem 2rem;
}

.relative {
    position: relative;
}

.pagesContainer {
    position: absolute;
    width: 200px;
    max-height: 75vh;
    overflow: auto;
    /* 提高层级确保菜单悬浮在最上层 */
    z-index: 10000;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: .5rem 0rem;
    right: 1rem;
    margin-top: .25rem;
    font-size: 14px;
}

.pageHover:hover {
    background-color: rgb(233, 233, 233);
}

.nowrap-text {
    white-space: nowrap;
}

/* 响应式适配 */
@media only screen and (max-width: 1090px) {
    .m-nav-container {
        margin: 2rem 14rem 2rem 2rem;
    }
}

@media only screen and (max-width: 768px) {
    .m-nav-container {
        margin: 2rem 9rem 2rem 2rem;
    }
}

@media only screen and (max-width: 600px) {
    .navbar {
        min-height: 70px;
    }

    .m-nav-container {
        margin: 1rem 5rem 1rem 1rem;
    }

    .mr-05-phone {
        margin-right: 0rem;
    }

    .logout-container {
        margin-right: 0rem;
    }

    .wrap-phone {
        flex-wrap: wrap;
    }

    .nav-items-phone {
        width: 65%;
    }

    .nowrap-text-phone {
        white-space: nowrap;
    }
}

HTML代码（无需修改） #

<div class="navbar background-gray">
    <div class="d-flex m-nav-container">
        <p class="color-red my-auto fs-25 mr-10 mr-2-ipad-pro d-none-ipad"><a href="/">Title</a></p>
        
        <div class="d-flex wrap gap-1 grow mr-1">            
            <a class="my-auto" href="/">
                <div class="white-background-display radius-25 background-white pointer d-flex fs-14">
                    <i class="fas fa-plus fa-lg color-red my-auto mr-05 mr-05-phone"></i>
                    <p class="color-lightgray d-none-phone nowrap-text">Add button</p>
                </div>
            </a>

            <div class="white-background-display radius-25 background-white pointer d-flex fs-14 my-auto">
                <i class="far fa-chart-bar fa-lg color-red my-auto mr-05 mr-05-phone"></i>
                <p class="color-lightgray d-none-phone nowrap-text">Button 2</p>
            </div>

            <div class="white-background-display radius-25 background-white pointer d-flex fs-14 my-auto">
                <i class="fas fa-history fa-lg color-red my-auto mr-05 mr-05-phone"></i>
                <p class="color-lightgray d-none-phone nowrap-text">Button 3</p>
            </div>

            <a href="/account-beheer/toegang" class="white-background-display radius-25 background-white pointer d-flex fs-14 my-auto">
                <i class="fas fa-ban fa-lg color-red my-auto mr-05 mr-05-phone"></i>
                <p class="color-lightgray d-none-phone nowrap-text">Button 4</p>
            </a>
        </div>

        <div class="d-flex">
            <div class="relative">
                <div id="PageMenuOpener" class="white-background-display radius-25 d-flex mr-1 pointer" onclick="openOrCloseMenu();">
                    <i class="fas fa-user-circle color-red my-auto mr-05 mr-05-phone"></i>
                    <p class="color-lightgray fs-14 d-none-phone">Username</p>
                </div>

                <div id="PageMenu" class="pagesContainer bold background-white color-darkgray">
                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 1</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 2</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 3</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 4</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 5</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 6</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 7</p>
                        </div>
                    </a>

                    <a>
                        <div class="pageHover p-1 pointer">
                            <p>menu 8</p>
                        </div>
                    </a>
                </div>
            </div>

            <a class="my-auto d-none-ipad">
                <i class="fas fa-sign-out-alt color-gray fs-20"></i>
            </a>
        </div>  
    </div>
</div>

内容的提问来源于stack exchange，提问作者Allart