html - 下推网页中的内容

Question

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

Answer 1

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

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

<div id="floatingNotification">

</div>

然后在 css 中:

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

#outerContainer
{
    margin-top: 20px;
}