Fix HTML Page Element Relative to Browser Chrome

Question

I'm trying to position a div at the top left corner of the page, and I want it to stay there regardless of browser window resizing or page scrolling.

How can I do this either with plain CSS (if possible), or with jQuery?

Answer 1

use css position: fixed;

#fixedDiv {
    position: fixed;
    left: 20px;
    top:20px;
    width: 50px;
    height: 50px;
}

For IE6, see http://www.cssplay.co.uk/layouts/fixed.html

Answer 2

css-selector {
    position: fixed;
    top: 0;
    left: 0;
}

Take care of the z-index. Higher = foreground.