下推网页中的内容答案

【问题标题】：Pushing Down Content in Webpage下推网页中的内容
【发布时间】：2010-03-06 05:13:02
【问题描述】：

我将一个 div 浮动到窗口的顶部。但是，它覆盖了页面顶部的内容，也就是说，它不是向下推页面的最顶部。然而，我看到 Stack Overflow 使用他们的通知栏这样做，因为它没有覆盖用户名/代表/链接。有没有办法可以用 CSS 复制它？

【问题讨论】：

你能添加你用于浮动元素的代码吗？
编辑添加jQuery标签，因为我相当确定它是相关的。

【解决方案1】：

可以将外层容器对象的margin-top设置为浮动div的高度：

<div id="outerContainer">
    ... page content goes here ...
</div>

<div id="floatingNotification">

</div>

然后在css中：

#floatingNotification
{
    ...
    height: 20px;
}

#outerContainer
{
    margin-top: 20px;
}

【讨论】：

【解决方案2】：

对于 Stack Overflow，我认为他们很有可能使用 jQuery 来操作页面内容。我没有探索链接的脚本，也没有任何通知要检查，但我冒险猜测它是这样的：

$(document).ready(
    function() {
        var element = '<div id="notification"></div>';
        var text    = '<p>The text to show in the notification thingumabob.</p>';

        $('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none');
        if ('#notification') {
            $('div#notification').slideDown('slow');
        }
    }
)

请注意，我对 jQuery 非常陌生 - 坦率地说，一般来说，JavaScript 也是如此 - 所以我很有可能提出了一些可怕的错误。但是，经过测试，这个概念是有效的。即使您要添加的element 是浮动的或绝对定位的，slideDown() 似乎也会负责移动页面内容以避免它覆盖其他元素。

不过，这可能是，也可能不是我的设置中的巧合。

【讨论】：

【解决方案3】：

这个问题的答案取决于您使用的是相对定位还是绝对定位浮动。如果它是绝对的，请将您的浮动 div 设置为例如 {top: 20px;}。如果是相对的，请使用 padding-top、margin-top（或在其上方的元素上使用 margin-bottom）。

在常见浏览器中最有效的方法取决于整体情况。

【讨论】：