Positioning

What is the difference between relative, absolute and fixed positioning?

A concept that you need to understand first is the every element on a web page is a block of rectangle pixels. Positioning is moving these blocks of pixels exactly where you want them to go on the website.

Relative

Relative to itself. This is what relative positiong is. For relative positiong to work you need to give it positioning attributes like top, left, right or bottom or it won't work. For example let's say you give it left: 10px it will shift its position 10 pixels to the right of where it would normally be. It is useful when elements have a tendency to not line up right.

Absolute

A powerful type of positioning that can place any element wherever you want to put it. The thing to remeber is that these values will become relative to the next element parent with absolute or relative positioning. If there is no parent it will go back up the html element itself, becoming relative to the page itself.

Another important thing to remember is that absolute positioning makes elements removed from the flow of elements with the page. It doesn't get affected by other elements nor does it affect other elements. Improper or overuse can seriously effect flexibility and performance of your site.

Fixed

Fixed position elements are positioned relative to the browser windoer or viewport. It dosen't change when scrolling down the page and will "travel" right where it is when scrolled. This can be useful for navigation bars if you wish for them to be visible at all times. It can cause overlaps within the contents of the page making some of inaccessible to it viewers.