html - 使 CSS 弹出窗口始终保持在其父级之上

Question

我有两个 div。

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

它们以某种方式充当弹出按钮。

有什么方法可以强制divwithposition: absolute始终保持在它的父级之上，无论它的高度是多少？

在上面我的意思是“站在上面”，而不是z-index财产

jsFiddle 示例

<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)