Skip to content

Instantly share code, notes, and snippets.

@lazd
Created January 26, 2014 04:31
Show Gist options
  • Select an option

  • Save lazd/8628434 to your computer and use it in GitHub Desktop.

Select an option

Save lazd/8628434 to your computer and use it in GitHub Desktop.
CSSBasics: Position

The position property

Position is one of the most misunderstood CSS values, and it's also the one you should know the best. Read on for the details.

static - Positioned in the flow of the document

Default value for all elements. The element will flow in the document according to its properties and the properties of the elements around it (namely display and float).

relative - Static with offset

Behaves exactly as static would, except respects the top, right, bottom, and left properties as "offset values." For example, if you set top: 4px, the element would be shifted downward by 4px, overlapping anything below it. z-index is respected for relative positioned elements. Most commonly used as a container for absolute positioned elements.

absolute - Positioned relative to the first positioned ancestor

Positioned relative to the nearest ancestor with a position other than static. z-index is respected for absolute positioned elements.

If no ancestor is positioned, the element will be positioned relative to the "initial containing block," which is effectively a chunk of the page the size of the browser window (starting from the top left of the page). However, when the page is printed, the intial containing block is the entire printed page.

fixed - Positioned relative to the window

Positioned relative to the window (stays in the same place as you scroll). z-index is respected for fixed positioned elements.

sticky - A combination of relative and fixed

Positioned as if it was position: relative until the user has scrolled past a threshold, after which point it is position: fixed until the user scrolls past the parent container.

position: sticky is not supported yet in all browsers.

Further reading

See the w3 wiki page on positioning for in-depth examples and detailed descriptions. However, note that the description of the "initial containing block" contained in this article is incorrect -- it has nothing to do with the <html> element.

See the MDN article on position for more information on the position property.

See this article on HTML5Rocks for more information on position: sticky.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment