Absolute, Static, Relative and Fixed Positioning Tutorial

Today we are going to talk about Static, Relative, Absolute, and Fixed.

 Static: The elements will be in the same place where it usually starts on the page. When you type in static and hit refresh, it will stay positioned as it usually does.

Relative: The element are positioned in relation where it would normally be in the page. As you can see, it will overtop the element.

Absolute: It removes an element from the document flow and it goes anywhere we tell it to.

     

Fixed: The element will stay even when scrolling. Try adding 0px for the margin and top. When you check on safari and try scrolling down, it will stay where its positioned and will stay on top on the other element behind it.