Master CSS Positioning: From Static to Sticky Explained

CSS's position property defines how an element is positioned on the page.

There are five main positioning values:

static : The default; the element remains in the normal document flow, and top/right/bottom/left and z-index have no effect.

relative : The element stays in the normal flow but can be offset using top/right/bottom/left; z-index works.

absolute : The element is removed from the flow and positioned relative to the nearest positioned ancestor (any ancestor with a position other than static); if none exists, it is positioned relative to the root element.

fixed : The element is removed from the flow and positioned relative to the viewport; it does not move when the page scrolls.

sticky : A newer CSS3 value; the element behaves like relative until the page scroll reaches a specified offset, then it behaves like fixed relative to its nearest block ancestor.

Typical usage example for sticky positioning:

.sticky {
  position: sticky;
  top: 10px;
}

When the viewport scrolls such that the element’s top distance becomes less than 10 px, it switches from relative to fixed, staying 10 px from the top until the scroll position goes back above the threshold. At least one of top, right, bottom, or left must be set for sticky to work.

If both top and bottom are specified (non‑auto), top takes precedence.

If both left and right are specified, the direction property determines precedence: left for ltr languages, right for rtl languages.

Browser support: iOS 6+ and Safari 6.1+, Firefox 32+, Chrome 56 Beta.