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

Keep Your CSS Files Organized

CSS files are notorious for very quickly growing long, jumbled and confusing. Here's how I stay organized

Jan 15, 2013

Simplify CSS Measurements using REMs

Using REMs exclusively for measurements in CSS is a handy tool for enforcing a stronger design system.

Nov 29, 2018

Simple Looping Crossfade Image Slideshow

A simple way to give the appearance of a full-screen looping slideshow with crossfading animation.

May 18, 2018