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

100 Free CSS Resources

There are countless ways to learn CSS. Here are 100 resources in various categories to get you started.

Pratham
Oct 14, 2021

CSS Grid Layout v CSS Frameworks

Should you be using a CSS Framework to build your grid or should you use the native CSS Grid Layout?

Nov 15, 2018

CSS Animations Quick Start Guide

Learn the basics of CSS animations to catch the attention of your website visitors.

Pratham
Jun 24, 2021