461 Contributors: 19 Wednesday, July 5, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial:
Roadmap: roadmap



  • position: static|absolute|fixed|relative|sticky|initial|inherit|unset;
  • z-index: auto|number|initial|inherit;


staticDefault value. Elements render in order, as they appear in the document flow. The top, right, bottom, left and z-index properties do not apply.
relativeThe element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's LEFT position
fixedThe element is positioned relative to the browser window
absoluteThe element is positioned relative to its first positioned (not static) ancestor element
initialSets this property to its default value.
inheritInherits this property from its parent element.
stickyExperimental feature. It behaves like position: static within its parent until a given offset threshold is reached, then it acts as position: fixed.
unsetCombination of initial and inherit. More info here.


Normal Flow is the flow of elements if the position of element is static.

  1. defining width is beneficial because in some cases it prevents overlapping of element's content.

Related Examples