CSS - 将“普通”div放在使用“position：absolute”的div下面？

Question

我有一个覆盖整个屏幕的背景。黑线是视口的终点。

Main-div只是一个使用绝对位置的容器（深蓝色）。

Top-div（黄色）也使用绝对位置。

Middle-div（红色）也使用positon absolute。

为什么呢？好吧，我希望Middle-div（红色）完全覆盖整个屏幕。也只有一半应该是可见的 - 需要滚动才能看到它。

一切正常，但我怎样才能将Foot-div（黄色）放在Middle-div（红色）下面？

黄页脚的CSS代码：

#footy
{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;

    border: 1px solid yellow;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}    

现在它位于底部，在上面留下太多空隙。它必须适用于不同的分辨率的问题。设置底部：100px;只会对这个决议有效....

图像：

Answer 1

您不能将元素相对于其他绝对定位的元素定位，除非它们是所述元素的子元素，或者当您知道两个元素的位置和大小时，它们是同一元素的两个子元素。

如果您将页脚设为中间div的子项，则可以将其置于以下位置：

#footy
{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: -100px;

    border: 4px solid yellow;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}    

我不知道你所有的其他CSS / HTML，但我猜这里有一个小提琴，有一些夸张的边框等，用于视觉参考：

http://jsfiddle.net/jtbowden/NuG7T/

您还可以围绕middle和footy创建包装：

http://jsfiddle.net/jtbowden/NuG7T/1/