stackoverflow 的一些变化，比如顶部的通知消息？答案

【问题标题】：Some changes in stackoverflow like notice message at top?stackoverflow 的一些变化，比如顶部的通知消息？
【发布时间】：2011-12-30 12:41:12
【问题描述】：

我正在按照本教程在浏览器窗口顶部显示消息。

jQuery Notification Message like StackOverflow

CSS：

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

问题：

但问题是它显示在顶部的页面内容上方，而我的网站菜单隐藏在它后面。

我希望它出现在网页内容的顶部，当用户关闭它时，页面内容应该向上移动。当用户滚动浏览器页面时，它也不应该移动。就像 stackoverflow.com 一样。

我怎样才能做到这一点

谢谢

【问题讨论】：

那我应该用什么？
据我所知，您需要默认位置。尝试切断这条线，也许它会工作:-)
当我使用position: relative 时，位置问题得到了解决，但它开始随着滚动而移动..
你没有说你不想让它滚动！（编辑）最初;）
是的。我不希望它滚动，但它正在滚动:)

标签： jquery message css

【解决方案1】：

如果您想使用position:fixed，以便向下滚动时消息仍然存在，请在页面顶部添加另一个相同高度的（空）div，但不要定位它。当页面向上滚动时，您的固定 div 将位于其顶部，并在您向下滚动时移动。

【讨论】：

但是当我关闭此消息时，正文内容应该向上移动以填充顶部的空间..

【解决方案2】：

只需将<div> 放在<body> 的顶部并使用position: static。这是默认设置，因此如果您不使用 position，它也可以正常工作。

要让它滚动，请使用Grim's solution。这是一个工作示例：http://jsfiddle.net/PPvG/sECk9/1/

您可以通过编程方式创建占位符，因此它的高度与通知消息完全相同：

var placeholder = $('<div />').css('height', $('#notification').outerHeight());

删除通知时，您可以在动画完成后删除占位符：

$('#notification').fadeOut("slow", function() {
    placeholder.remove();
});

【讨论】：

<div> 已经在<body></body> 的顶部。使用position: static后，位置问题解决了，消息显示在内容上方，但是当我滚动网页时，它也在移动。

【解决方案3】：

如果您使用position:fixed 定位您的消息，那么您将更改正常流程。只需将其放在 html 中的菜单上方，当用户单击隐藏按钮时，菜单将取而代之。

演示： http://jsfiddle.net/vNpeG/

【讨论】：

您的示例正在运行，但在我的情况下不起作用。我现有的 css 中可能存在一些复杂性..
@Awan 为您提供解决方案，我还需要您当前的 html 代码。像上面这样的 jsfiddle 演示，加上你的代码，会有所帮助。