Home

Absolute vs. Relative Positioning

The golden rule of absolute positioning.

If you've ever tried to lay out an HTML page with a second column or sidebar, I'd bet you ran into an issue with the position property at one point or another.

I was struggling with this until I came across advice I will now never forget. This is the golden rule of absolute positioning:

An absolutely positioned element is positioned relative to the closest ancestor that is positioned relatively.

In other words, if you want to absolutely position an element in relation to its parent, the parent MUST be relatively positioned.

As usual, Chris Coyier has some good examples.

Let's Connect

Keep Reading

One of My Favorite Performance-Boosting Netlify Plugins

Inlining critical CSS is a breeze for classic SSG sites built and deployed using Netlify. Here’s how it works.

Jun 25, 2022

Streamline Your CSS with Sass

I began using Sass yesterday and I am already in love.

Feb 06, 2013

The 3 Principles of Good CSS Design

CSS is hard, but we make it that way. Keep to the basics and you'll be empower yourself to build and scale products quickly.

Nov 05, 2018