May 17th 2015

CSS Positions : absolute

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

What is Position Absolute?
Position absolute is just what it sounds like. It makes the element be absolutely positioned regardless of the page flow, its siblings or what anybody else says!

position: absolute;
top: 100px;
left: 5px;

When should I use this?

  • Use it to create ribbons, notification icons, badge icons...
  • Or any other instance where the element doesn't need to sit in relation to its siblings.

Tell me more

  • When an element is positioned absolutely it is taken out of the page flow and positioned absolutely in relation to its first parent that is not Position: Static, which by default is the window. So if you want your element's scope to be limited to its container, the container needs to have Position: Relative or anything other than Static
  • You have access to Top, Right, Bottom, Left properties when you use this option.

Next stop is Position Fixed. Check it out!