CSS - 在使用“位置：绝对”的 div 下方放置一个“普通”div？答案

【问题标题】：CSS - Position a "normal" div below a div that uses "position: absolute"?CSS - 在使用“位置：绝对”的 div 下方放置一个“普通”div？
【发布时间】：2014-01-08 17:38:36
【问题描述】：

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

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

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

Middle-div（红色）也使用绝对位置。

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

一切正常，但如何将 Footer-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；仅适用于此分辨率....

图片：

【问题讨论】：

你能做一个 jsfiddle 朋友吗？
似乎设置底部：8%；在几个分辨率上看起来不错，但仍然有 20px 的小差距......
@LloydBanks 我从来没有这样做过
您可以将两个 div（红色和黄色）放在一个父级 :absolute div 中，并将子级更改为 :normal。
@Arkham.vm 嗯......这实际上可以工作！没有想到这一点，因为 Red 中有一张背景图片...

标签： css html

【解决方案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/

【讨论】：

是的，我刚刚意识到！工作完美，底部为负值！但是...溢出：隐藏取消了它。因此，我使用容器 div 寻求您的第二个解决方案。谢谢！