11 January 2017

Understanding CSS Positioning

Image by Liam Shaw.

In CSS, positioning is one of those fundamental aspects that every developer should know, and yet still throws up confusion that can leave even a more experienced developer scratching their head (as I found out personally recently whilst reviewing one of my team's code).

So, in the simplest terms, using position in CSS dictates how an element is placed onto the page. There are four main types you can use: static, relative, absolute, and fixed, although it's worth also bearing in mind that position isn't the only way of changing the position of an element on the page...

`static` Positioning

Static is the default positioning for any HTML element. An element with position: static will be positioned according to the normal flow of the document/page. If you're using static then changing the top, right, bottom, or left properties won't affect the element.

`relative` Positioning

A relatively positioned element remains in the normal flow and keeps its original space. The top, right, bottom or left values offset it visually from that position; surrounding elements are laid out as though it had not moved.

For example, if you wanted to move an element 10rem to the right, and 20rem down, your CSS would look like this:

.element {
  position: relative;
  left: 10rem;
  top: 20rem;
}

These values offset the element from its original position, so using positive values essentially 'pushes' the element. In this case we've pushed it across 10rem from the left and 20rem from the top, moving it to the right, and downwards. If you use negative values, you essentially 'pull' the element instead. So we could achieve the same positioning using negative values like this:

.element {
  position: relative;
  right: -10rem;
  bottom: -20rem;
}

`absolute` Positioning

position: absolute removes the box from normal flow. Its offsets are resolved against its containing block, usually established by the nearest positioned ancestor, but other properties such as a non‑none transform can establish one too. With no qualifying ancestor, it uses the initial containing block, which is based on the viewport in continuous media; that is not simply the document's <body>.

This one is a little more difficult to demonstrate in code blocks here, but if you imagine you have a div with the classname of parent, and a child within it with the classname child, then the CSS below will position .child 5rem off the top and left edges of .parent.

.parent {
  position: relative;
  width: 50rem;
  height: 50rem;
}

.child {
  position: absolute;
  top: 5rem;
  left: 5rem;
}

It's worth mentioning here that if .child is the only child of .parent, and if the parent element did not have any dimensions defined, then it would collapse down as the only child is positioned absolutely (and therefore is removed from the flow of the page).

`fixed` Positioning

position: fixed also removes the box from normal flow. It normally uses the viewport as its containing block, so it stays in place as the document scrolls. An ancestor with a non‑none transform can establish the fixed‑position containing block instead. For navigation that should stick within its scrolling context, there is also position: sticky, though its browser support still needs care in this January 2017 context.

As with position: absolute, the element is removed from the flow of the page, and any space it might have otherwise inhabited is reflowed as though it was never there.

When the viewport is the fixed‑position containing block, these rules place an element across the top of the screen:

.element {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

You can use a fixed box to cover that containing block, for example as a modal backdrop. Check both the containing block and the stacking contexts, and avoid conflicting dimensions that would prevent the box filling the area.

Here, .element fills its fixed‑position containing block. It covers the viewport when no ancestor establishes a different one:

.element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Wrapping Up

As more modern CSS3 properties become mainstream, we will see a number of new and (hopefully) more performant options for positioning elements. For now, though, understanding how to use CSS positioning effectively is a real cornerstone skill for any front‑end developer.