Positioning in CSS

As a junior or new(ish) front‑end developer, there are obviously a lot of properties and quirks to get to grips with in CSS. However, one of the most important and foundational properties is the position property. Despite its importance, there are still times when a dodgy position declaration stumps even the most experienced of front‑end developers ‑ much like z‑index, which I have covered previously.

There are five unique declarations for this rule, and each one acts very differently from the others, so let's do a quick run‑through of each.

Static

This is the default positioning of every element ‑ meaning if you haven't declared a position for any given element, it will be positioned statically. Static elements are predictable and work with the normal document flow, allowing text, images, and other pieces of hypermedia to flow as expected.

However, there is something to bear in mind here ‑ and this is what catches developers out at times. With static positioning, there are a number of other rules that won't apply ‑ ones that affect physical positioning (such as top, left, bottom, or right), and z‑index. That last property is the source of many a Stack Overflow question, as it's easy to forget about the position declaration when you're dealing with other properties.

Relative

Relative is likely to be the positioning declaration you're going to be using the most. Much like with static positioning, elements that are relatively positioned stick to the normal flow of your document. However, it also enables you to make use of those handy positioning and z‑index properties that static positioning misses out on.

Relative positioning also affects other things. For instance, if you apply relative positioning to a parent container, anything inside with absolute positioning applied will now be positioned absolutely, but in relation to the boundaries of the relatively‑positioned parent, rather than the document.

Relative positioning also creates new stacking contexts where z‑index is concerned. Generally, you will want a parent to be relatively positioned ‑ but definitely not always.

Absolute

Absolute positioning is where things start to get a bit more advanced. An absolutely positioned element is taken out of the document flow, meaning that other elements will act as though it is not even there: siblings will flow on top or behind it, and parents will act as though it's not there at all. Amongst other things, this means parents will lose any height they would have inherited from the position: absolute child.

There are some things to bear in mind with absolute positioning; namely: parent containers and contexts. If your absolute positioned element has a parent without positioning applied or with static positioning applied, your element will not be positioned absolutely according to it, instead being positioned to the document or to anything further on up the DOM tree that does have positioning.

Fixed

Fixed positioning is usually used for things like sidebars, cookie notices, modal boxes, or navigations. Elements with position: fixed are positioned according to the document no matter what and are not affected by scrolling. This means that an element with fixed positioning, and a top: 0; declaration will sit at the top of your screen no matter how far you scroll (although whether or not it will appear above or behind other content on the page will all depend on those element's position and z‑index contexts).

Sticky

Sticky positioning is still a somewhat new rule that unfortunately doesn't yet have a tonne of widespread support. Nevertheless, it is a really promising property that can be taken as something of a mix between relative and fixed positioning, allowing for an element to be within the normal flow of the document until the document is scrolled to a certain point (which the developer can specify), at which point it becomes a fixed element.

With sticky positioning, positioning rules like top specify when the element switches from relative to fixed, for instance applying a top value of 0 will make the element transition to sticky once the top of element is 0px away from the top of the viewport. This is particularly helpful for things like navigation if you want to start your site with a masthead advertisement and then have the user scroll to pick up the navigation bar.

The Wrap‑Up

The final declaration for the positioning rule is inherit. By default, the positioning declaration doesn't flow from parents to children: a parent with position: absolute will have children with position: static unless defined otherwise. So, you can force it to inherit the property from the parent by using inherit.

Positioning is one of the most foundational things to learn as a developer, and with handy new declarations like sticky coming out, it is still evolving. Alongside display, positioning is one of the first CSS rules you should get to grips with as you will very likely have to use multiple positions on almost any project you work on.