Positioning method for an element.
Syntax
position: static | relative | absolute | fixed | inherit ;
static - Render elements in order, as they appear in the document flow
relative - Position relative to the normal (static) position using top, bottom, left or right.
absolute - Position relative to the html page (or parent element).
fixed - Position relative to the browser window, this fixed position won't scroll if the page scrolls.
inherit - inherit from the parent element.
Where one element is nested within another, the position of the inner DIV element will be relative to its parent DIV container, but only if that parent DIV has a non-static position.
If an element’s position is set to absolute or fixed, float will be ignored (the computed value is none).
Examples:
h1 { position: relative; }
.emw3class { position: absolute; }
#emw3id { position: relative; }
Try it:
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. |
(CSS 2) Browser Support: All major browsers.
“Do not worry about holding high position; worry rather about playing your proper role” ~ Confucius
Related:
clip - Clip an absolutely positioned image/element.
float - Shift to the left (or right) allowing other content to flow/wrap alongside.
width - Width of an element.
z-index - Stack order of a positioned element.