下拉菜单超出窗口视图的响应式定位问题求助

问题根源在于绝对定位的下拉菜单没有相对定位的参考容器，且未设置正确的对齐规则，导致菜单超出视口范围。以下是具体修复方案：

• 给包裹按钮与下拉菜单的父容器添加position: relative，让下拉菜单的绝对定位以该容器为基准，而非整个文档
• 给.dropdown-content设置right: 0，让菜单对齐父容器右侧，自然适配不同屏幕宽度，不会丢失响应式特性
• 可选添加box-sizing: border-box，确保内边距不会额外撑开菜单宽度

修改后完整代码 #

JavaScript（无需改动）

// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
    document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
    if (!event.target.matches('#verify-name')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

CSS（修改部分已标注）

.buttons {
    display: flex;
    justify-content: flex-end;
    color: red;
}
/* 新增：给按钮父容器添加相对定位，作为下拉菜单的定位基准 */
.buttons > div {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    width: 120px;
    padding: 14px;
    background-color: yellow;
    right: 0; /* 新增：让菜单对齐父容器右侧 */
    box-sizing: border-box; /* 可选：确保内边距包含在宽度内 */
}
.show {
    display: flex;
}

HTML（无需改动）

<div class="buttons">
    <div>
        <a id="verify-name" onclick="myFunction()">Press Me</a>

        <div class="dropdown-content">
            <span>Logout</span>
        </div>
    </div>
</div>

原理说明 #

• position: relative为绝对定位的子元素提供了定位上下文，确保下拉菜单始终依附于按钮所在容器
• right: 0让菜单右侧与父容器右侧对齐，无论屏幕宽度如何变化，菜单都会紧贴按钮右侧显示，不会超出视口
• box-sizing: border-box避免内边距额外增加菜单宽度，保证设置的width:120px为最终实际宽度

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