Question

我将div浮动到窗口的顶部。但是，它覆盖了页面顶部的内容，也就是说，它不是在页面的顶部。然而，我看到Stack Overflow使用他们的通知栏执行此操作，因为它没有覆盖用户名/ rep / links。有没有办法可以用CSS复制它？

Answer 1

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

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

<div id="floatingNotification">

</div>

然后在css：

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

#outerContainer
{
    margin-top: 20px;
}

Answer 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()似乎也会处理移动页面内容以避免覆盖其他元素。

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

Answer 3

答案取决于你是使用相对位置还是绝对定位浮点数。如果它是绝对的，请将float div设置为例如{top：20px;}。如果是相对的，请使用padding-top，margin-top（或在其上方的元素的margin-bottom）。

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

在网页中推送内容

3 个答案: