Understanding Position in CSS

“Close-up of a person's hands on the keyboard of a MacBook” by Glenn Carstens-Peters on Unsplash

Developing an understanding of the position property in CSS can be one of the most frustrating experiences for a beginner.

I can remember lucking out sometimes playing CSS roulette — trying different combinations of positions until I kind of got what I wanted. Kind of. I also remember times I wasn’t so lucky and ended up with a garbled mess.

Turns out, lady luck favours the prepared, so before your next spin on the wheel, here’s an ace to have up your sleeve.

This is CSS positioning simplified.

tldr — there’s a cheat sheet at the bottom.

There are two types of positioning

There is static-type positioning and relative-type positioning.

Static-type positioning consists of only one value: position: static. It’s the default, so you’ll rarely see it declared.

Relative-type positioning consists of the values position: relative, position: absolute and position: fixed. These positioning values interact with each other and allow you to move elements around in interesting ways.

Static Positioning

Let’s get the boring stuff out of the way first. While its not very often you’ll see a static position declaration in the wild, it behooves us to…