让CSS弹出窗口始终保持在它的父级之上

Question

我有两个div。

一个位置相对，另一个位置绝对。

他们以某种方式表现为弹出式按钮。

有没有办法强迫div position: absolute始终保持在其父级之上，无论它有多高？

在顶部我的意思是“站在它上面”，而不是z-index属性

jsFiddle example

<div style="position: relative; border: 1px solid #000; padding: 2px;">
    <span>Popup container</span>
    <div style="position: absolute;">
        <div style="height: 100px; background-color: #f0f0f0; top: 0;"></div>
    </div>
</div>

Answer 1

尺寸是根据容器本身计算的

所以你需要给它一个

bottom:100%;

http://jsfiddle.net/gaby/Rhb3M/4/

演示

Answer 2

如果您的popupParent具有固定的高度（例如100px），那么您可以使用bottom：

bottom: 100px;

检查更新的小提琴：http://jsfiddle.net/Rhb3M/2/

还要记住你应该添加的其他值（填充，边距，边框）

在您的情况下，它将105px（100px height + border + 2*padding）