Absolute Relative Positioning

Absolute relative positioning is one of my favorite CSS tricks, and by far my favorite trick involving the CSS position style rule. The concept is very simple. Take two divs, a rectangle and a circle:

See the Pen wmLqzv by Float Nine (@floatnine) on CodePen.

There is some CSS at the bottom of the window (hidden) that determines the size and shape of the two divs. Ignore that. What we are focusing on here is the positioning style rules, shown in .circle and .rectangle.

Take another look:

See the Pen wmLqzv by Float Nine (@floatnine) on CodePen.

In the HTML (seen if you click the “HTML” button) you can see that the circle is clearly inside the rectangle. But because of the circle’s absolute position, with a bottom and right value of 0px, it is stuck to the bottom of the screen. Now, let’s add one style rule to the .rectangle class:

See the Pen geNxwJ by Float Nine (@floatnine) on CodePen.

Pretty cool, huh? By adding the position of relative to the rectangle, we’ve completely changed the design layout of the page. Now the circle sits in the bottom-right of the rectangle, not the bottom-right of the page itself. Think of it like this: the circle is now positioned absolute bottom-right, relative to the rectangle.

And it’s really that simple. You can use this trick to position almost any element relative to its parent container.

Leave a comment below letting me know what you think, and check out my Twitter feed here.

Leave a Reply

Your email address will not be published. Required fields are marked *