Take the 2-minute tour ×

I am following this tutorial to show messages at top of browser window.

jQuery Notification Message like StackOverflow


#message {
    padding:10px 0px 10px 0px;

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


But problem is that it is shown above the page content at top and my website menu goes hidden behind it.

I want it to appear at top of the webpage content and when user close it then page content should move up. It should not also move when user scroll browser page. Just like stackoverflow.com.

How can I achieve this


share|improve this question
don't use position: fixed –  Sergio Tulentsev Dec 30 '11 at 12:43
what should I use then ? –  Awan Dec 30 '11 at 12:44
From what I can see, you need default position. Try to cut this line and maybe it'll work :-) –  Sergio Tulentsev Dec 30 '11 at 12:46
When I use position: relative then position problem is solved but it starts moving with scrolling.. –  Awan Dec 30 '11 at 12:47
You didn't say you didn't want it to scroll! (edit) Originally ;) –  Grim... Dec 30 '11 at 12:48
show 1 more comment

3 Answers

up vote 1 down vote accepted

Just place the <div> at the top of your <body> and use position: static. This is the default, so if you just leave position out, it will work as well.

To also allow it to scroll, use Grim's solution. Here is a working example: http://jsfiddle.net/PPvG/sECk9/1/

You can create the placeholder programmatically, so it has the exact same height as the notice message:

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

When removing the notification, you can remove the placeholder after the animation has finished by doing this:

$('#notification').fadeOut("slow", function() {
share|improve this answer
<div> is already at top in <body></body>. After using position: static, position problem is solved and message is shown above the content but when I scroll webpage, it is also moving. –  Awan Dec 30 '11 at 12:51
@Awan: I updated the example. –  PPvG Dec 30 '11 at 12:58
Thanks, It is working perfectly in your example. –  Awan Dec 30 '11 at 13:24
add comment

If you want to use position:fixed so the message is still there if you scroll down, add another (empty) div of the same height at the top of your page but don't position it. Your fixed div will sit on top of it when the page is scrolled up, and move when you scroll down.

share|improve this answer
But when I close this message then body content should move up to fill the space at top.. –  Awan Dec 30 '11 at 12:54
So just remove both divs, right? –  Grim... Dec 30 '11 at 13:12
add comment

if you position your message with position:fixed then you change the normal flow. Just position it above the menu in your html and when user click the hide button the menu will take its place.

Demo: http://jsfiddle.net/vNpeG/

share|improve this answer
your example is working but it is not working in my case. may be there is some complexity in my existing css.. –  Awan Dec 30 '11 at 12:59
@Awan to provide you a solution for your case, I need your current html code also. A jsfiddle demo like the above, with your code, would help. –  Sotiris Dec 30 '11 at 13:03
add comment

Your Answer


