Understanding Fixed Positioning

position: fixed REMOVES the element from the normal flow of the document, and allows you to "pin" one corner using the top/bottom/left/right properties. Where the browser starts to count from the top, bottom, left or right depends on the context box for the fixed value.

The context box for position: fixed is always THE VIEWPORT. It is like a sticky note on the viewport. If you fix an element below the fold, you'll need to scroll to see it. However, if an element is above the fold, it will stay in that spot, relative to the viewport, no matter how much scrolling you do.

STICK THIS TO THE VIEW PORT!