#198: About the Position Property

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
  • fixed: like absolute, but scrolling the page doesn’t move the element
  • sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set threshold
  • inherit: makes the position values whatever the parent’s position value is

The almanac has more detail.