CSS Position

CSS Position: Static, Relative, Absolute, Fixed, Sticky.

Updated

  1. Static (Apprentice): Static is the default position, where elements sit in the normal flow of the page and top and left don't move them.
  2. Relative (Apprentice): Relative positioning moves an element away from its own normal place, and keeps the space it would have used.
  3. Absolute (Apprentice): Absolute positioning takes an element out of the page's flow and places it relative to its nearest positioned ancestor, usually a parent with position relative.
  4. Fixed (Apprentice): Fixed positioning places an element relative to the browser window, so it stays on screen while the page scrolls.
  5. Sticky (Apprentice): A sticky element scrolls with the page until it reaches its top offset, then stays put until its parent scrolls away.