CSS positioning allows you to control the layout of elements on a page. There are several positioning methods including static, which is the default and positions elements normally in the flow of the document. Absolute positioning removes elements from the flow and positions them at a specific point, while relative positioning positions elements relative to their normal position in the flow. Fixed positioning positions elements relative to the browser window so they stay fixed even when scrolling.

1. CSS Positioning
Ruby Nguyen - nthngoc277@gmail.com

2. What is CSS positioning?
The CSS positioning properties allow you to position an
element.

3. Normal Flow

4. Static
The default positioning for all elements is
position:static, which means the element is not
positioned and occurs where it normally would in
the document.
Normally you wouldn't specify this unless you
needed to override a positioning that had been
previously set.

5. Absolute
Absolute positioning allows you to remove an object from
the typical flow of the document and place it at a specific
point on the page.
Example: http://codepen.io/nthngoc277/pen/ZYjNwv

6. Relative
Relative positioning works similarly to absolute positioning
in that you can use top, bottom, left and right to scoot an
object to a specific point on the page.
The primary difference is the origin or starting point for the
element.
With absolute positioning, the starting point was at the very
top left of the browser window. With relative positioning
starting point is where it normally lies in the flow of the
document.
Example: http://codepen.io/nthngoc277/pen/ZYjNwv/

7. Fixed
An element with a fixed position is positioned
relative to the browser window, and will not move
even if the window is scrolled.

8. Inherit
Inherit - it’s pretty self explanatory

9. Relative and Absolute
What position: absolute; really does is position the
element relative to its first non-statically-positioned
ancestor.
Example:
http://codepen.io/nthngoc277/pen/dPjBbB

10. Reference
http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/