父元素设置overflow-y:auto等属性时如何让绝对定位孙级弹窗正常显示

问题核心说明 #

你遇到的是滚动容器溢出裁剪的典型问题：只要子元素的定位上下文在elements-container内部，超出容器水平范围的内容就会被overflow-x: hidden裁剪，和z-index取值无关。另外你现有CSS存在选择器错误：.popup是.hover-me的兄弟元素而非子元素，原有.hover-me:hover > .popup不会生效，需要先调整为.hover-me:hover + .popup。

以下是不修改elements-container overflow属性的可行方案：

方案1：纯CSS调整（适用场景：elements-container未设置position属性）

该方案无需修改JS，仅调整CSS即可生效，要求elements-container没有设置position: relative/absolute/fixed/sticky。
调整后的CSS代码：

.elements-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.element {
    /* 确保element没有设置position属性，避免成为popup的定位上下文 */
    position: static;
}

.hover-me {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    z-index: 99999;
}

/* 修改为兄弟元素选择器 */
.hover-me:hover + .popup {
    display: block;
}

.popup {
    /* 改用fixed定位，直接相对于视口定位，脱离elements-container的裁剪范围 */
    position: fixed;
    background: #242528FF;
    border-radius: 3px;
    width: 200px;
    /* 自行调整坐标适配需求，也可配合calc计算偏移量 */
    left: calc(hover元素左偏移值 - 200px);
    top: hover元素顶部偏移值;
    color: white;
    display: none;
    z-index: 99999;
}

优缺点：无需JS，实现简单，但容器滚动时popup位置不会跟随移动，适合滚动交互少的静态场景。

方案2：JS动态挂载（全场景兼容，最推荐）

该方案兼容性最好，不受原有布局限制，hover时将popup移动到body下脱离父容器裁剪范围，同时计算坐标跟随hover元素。
首先调整CSS，移除popup的固定定位偏移：

.elements-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.hover-me {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
}

.popup {
    position: absolute;
    background: #242528FF;
    border-radius: 3px;
    width: 200px;
    color: white;
    display: none;
    z-index: 99999;
}

添加JS控制逻辑：

const hoverTriggers = document.querySelectorAll('.hover-me');

hoverTriggers.forEach(trigger => {
    const popup = trigger.nextElementSibling;
    // 鼠标移入时显示popup
    trigger.addEventListener('mouseenter', () => {
        // 把popup移到body下，脱离父容器裁剪范围
        document.body.appendChild(popup);
        // 获取hover元素的视口坐标
        const rect = trigger.getBoundingClientRect();
        // 设置popup位置，示例为在hover元素左侧显示
        popup.style.left = `${rect.left - 200}px`;
        popup.style.top = `${rect.top}px`;
        popup.style.display = 'block';
    });
    // 鼠标移出时隐藏popup并移回原位置
    trigger.addEventListener('mouseleave', () => {
        popup.style.display = 'none';
        trigger.parentElement.appendChild(popup);
    });
})

优缺点：适配所有布局场景，容器滚动时可配合滚动事件实时更新popup位置，不会影响原有功能，是生产环境的首选方案。

避坑说明 #

不要尝试仅修改overflow-x: visible保留overflow-y: auto，根据CSS规范，当overflow的其中一个轴设置为非visible值时，另一个轴的visible会被浏览器自动重置为auto，无法解决裁剪问题。

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