Understanding CSS Positioning

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

Positioning an element relatively takes the element from it's normal (static) position within the flow of the document, and moves it based on the values you set for the top, right, bottom, or left properties.

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

Absolute positioning does something a little different. If you use position: absolute, then the element will be removed from the normal document flow altogether and any space it might have occupied is reflowed. The values you use for top, right, bottom, and left then dictate how the element is positioned relative to it's closest‑positioned ancestor (except for static). If there are no positioned ancestors above it in the DOM, then the containing block is the document body (ie: it will position off the edges of the overall page).

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

You can think of fixed positioning as being a type of absolute positioning, except that it positions the element relative to the browser window rather than the closest positioned element. This means that it stays in the same position on your user's screen even as you scroll the page, which makes it very useful for sticky‑type interface elements like navigation bars although you could just use position: sticky for that ‑ support isn't great just yet though.

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.

As an example, if you wanted to position an element at the top, and across the full width, of the screen, then your CSS would look something like this:

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

You can also use position: fixed to overlay the entire screen (assuming that your z‑indices are coherently stacked), as the background for a modal for example. You just need to make sure you don't also add any other dimensions.

In this example, .element will position each of its edges against the edge of the screen, completely covering the content:

.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.