Editing Courses/Design & Technique-Essential Web Design/04 (section)

= Positioning =
CSS position property determines where an element will be positioned.

Example: http://codepen.io/anon/pen/VKKWgY

==position:static==
* the default position
* dont offset possibilities
* are positioned according to their default behavior

==position: relative==
* very similar to that of the static value
* position is in relation to the containing / parent element
* Main difference: relative value accepts box offset properties top, right, bottom left.
* Box offset properties allow precise positioning


==position: absolute==
* elements accept box offset properties (left,right, top, bottom)
* elements are removed from the normal flow of the document
* and positioned in relation to the body element
* off-set property are set in relation to the body and not containing element. E.g. <code>top: 10px;</code> will place the element 10px offset from the top of the browser window.

'''Interesting art work using absolute position and Google books image:
http://www.julienlevesque.net/books-scapes/
'''
==position: fixed==
* similar to absolute: off-set set in relation to the body
* but the '''positioning is relative to the browser viewport'''
* not scrolling with the page.
* always present, as if fixed to the screen

Based on http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/


==More on position==
* http://blog.fourthbit.com/2013/11/27/essential-css-positioning