CSS positioning

this code is at JS Bin

display: block

The element start on a new line, and takes up the whole width.

Block elements by default: p, div, h nav header, footer, article, section.

display: block
display: block

display: inline

The elements are positioned on the same line and does not have height and width.

Inline elements by default: a, span , strong, em, label

display: block
display: block

display: inline-block

These are inline elements with height and width adjustable.

display: inline-block (I have height and width!)
display: inline-block (I have height and width!)

With inline elements we could define columns. Above, to define 50% equal columns we remove border and white spaces between divs

display: inline-block(two equal columns)
display: inline-block(two equal columns)
display: inline-block(two equal columns)
display: inline-block(two equal columns)

float

Block (default) square divs

Altering position with float

CSS Float and Clear Explained - How does CSS float and clear work?

Inline-block squares divs (there are spaces between chars and rows


position: static

Default value, element is positioned according to the normal flow of the page.

position: static

position: relative

Element is positioned relative to its normal position.

position: relative

position: fixed

The element is positioned relative to the viewport, which means it always stays in the same place

See me bottom right!

position: fixed

position: absolute

The is positioned relative to the nearest positioned (not static) ancestor (instead of the viewport).

This is the nearest ancestor.
position: absolute