May 17th 2015

CSS Positions : fixed

What is Position Fixed, when should I use it and how?

What is Position Fixed?
Position Fixed is just like Position Absolute, except the element does not move if you scroll, and its scope is always limited to window.

position: fixed;
top: 0px;

When should I use this?

  • Use it to create page Headers and Footers
  • Or any other instance where the element needs to stay on its original position when the page scrolls.

Tell me more

  • When an element is positioned fixed it is taken out of the page flow and positioned absolutely in relation to the window.
  • You have access to Top, Right, Bottom, Left properties when you use this option.

And that's all the positions we have. Easy, right? So what's your favorite position? OK, just take me back to the Blog.