下推网页内容

发布于 2024-08-23 20:35:38 字数 128 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

別甾虛僞 2024-08-30 20:35:38

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

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

<div id="floatingNotification">

</div>

然后在 css 中：

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

#outerContainer
{
    margin-top: 20px;
}

You can set the margin-top of the outer container object to the height of the floating div:

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

<div id="floatingNotification">

</div>

Then in css:

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

#outerContainer
{
    margin-top: 20px;
}

回复收藏 0 原文

少跟Wǒ拽 2024-08-30 20:35:38

就 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总的来说——所以我很有可能提出了一些可怕的错误建议。但是，经过测试，这个概念是有效的。即使您要添加的元素是浮动的或绝对定位的，slideDown()似乎也会负责移动页面内容，以避免它覆盖其他元素。

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

In the case of Stack Overflow, I think there's a good chance that they're using jQuery to manipulate the page contents. I haven't explored the linked scripts, and I've not got any notifications to check with, but I'd hazard a guess that it's something like:

$(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');
        }
    }
)

Please be aware that I'm incredibly new to jQuery -and, frankly, JavaScript in general- so there's every chance that I've suggested something hideously wrong. But, having tested it, the concept works. Even if the element you want to add is floated or absolutely positioned the slideDown() seems to take care of moving the page contents in order to avoid it covering up other elements.

This may, or may not, be some coincidence in my set-up, though.

回复收藏 0 原文