How to make div always top using css?

Question

Like alert bar of stackoverflow here.

It should not be position:fixed,because it's not supported by all browsers.

Absolutely,neither will position:absolute do.

Answer 1

Put the div under the body tag, give it position absolute, top:0, left:0 And if you want it to push the content, just put it there without the CSS I gave you.

Answer 2

Make sure the element is directly nested under the body tag, use css with absolute position and top:0;

By the way, fixed is used by a large majority of the browsers.

Answer 3

Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.

Answer 4

Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.

Answer 5

You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.

function positionView()
{
  return (window.pageYOffset) ?
    window.pageYOffset :
    (document.documentElement.scrollTop) ?
      document.documentElement.scrollTop :
      document.body.scrollTop;
}

function setPosition(object)
{
  object.style.top = positionView() + "px";
}

Then just pass in the DIV object you want to use, with document.getElementById.

I'd use position: fixed;. Many people still use IE6, though, which does not support it.