如何让绝对定位的div附着于相对定位div并保留z-index？

当前搜索筛选下拉框采用绝对定位，父元素未设置相对定位时，滚动屏幕下拉框会停留在原位置，这符合绝对定位的特性。但给父元素设置相对定位后，下拉框的显示被局限在父元素内部，只能显示一半，z-index的效果也失效了。现在需要实现下拉框既能够附着在输入框下方，又能完整正常显示的效果。

当前布局的简化代码如下：

<div class='accordian-bottom' style='width: 100%;...'>
    <div style='position: relative'>
        <!-- input -->
        <div class='dropdown' style='position: absolute;..'>
            <!-- dropdown code -->
        </div>
    </div>
</div>

解决方法 #

• 移除父元素的溢出限制：检查外层容器（比如.accordian-bottom）或直接父元素是否设置了overflow: hidden，将其改为overflow: visible，这样绝对定位的下拉框就不会被裁切。
• 修复堆叠上下文问题：如果父元素设置了transform、filter、opacity等会创建堆叠上下文的属性，会导致下拉框的z-index仅在父元素内部生效。移除这些属性，或者给下拉框设置更高的z-index值（确保父元素没有创建独立堆叠上下文）。
• 调整定位父元素（备选方案）：将下拉框的定位基准改为页面根节点（<body>），通过JS计算输入框的实时位置，动态设置下拉框的top和left值，这样下拉框就不会受原父元素的样式限制。

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