See how absolute and relative positioning work together in CSS

The quick answer: Your absolutely positioned element needs to have a parent element that also has some sort of positioning specified on it so that it knows where to start calculating where it should be.

How absolute and relative positioning work together in CSS - a visual explanation with CodePen.

As designers, being able to put something exactly where we want it makes us happy :) So it’s no surprise that absolute positioning can look like a great tool to lay out page elements - and it is when used properly… However, if you don’t fully understand the way that absolute positioning works you will get frustrating and unpredictable results from it. I’m going to show you how absolutely positioned objects know where to go. After you see how absolute positioning works and how it is implemented by your CSS, you will be able to command it confidently!

When should I use absolute or relative positioning?

Absolute positioning is great for creating “layers” like text over photos but lousy for strong page layout (image from the Basic CSS Layout course project).

The short answer is: Absolute positioning is really handy for putting things on top of other things much like the way you would use layers in Sketch, Illustrator, or Photoshop. Like we see in the photo above from Basic CSS for Creatives, It’s really useful as a part of a design pattern (like a thumbnail image that has text and a button overlaying it) but it’s not very good for laying out a webpage.

Where people go wrong with how they use absolute positioning (and I say this mostly from having observed students do this) is that when they see they can enter a specific pixel value to move an element around, they feel like they can control the layout of the page like they do in a static design file i.e. in Photoshop/Sketch/Illustrator. But layouts on the web are fluid, and as soon as you resize your browser window, everything moves. So use other page layout techniques like floats, grid, and flexbox for your columns and sections, and use absolute positioning for what it is meant to be used for: to create cool layer effects!

Web pages are just boxes inside of boxes

Like a bookcase, the elements in a webpage stack , separate, and contain one another to form a larger layout. This hierarchy of relationships is called the Document Object Model or DOM for short.

I am going to use the phrase “travel up the DOM” when talking about how to use relative and absolute positioning. Looking at the DOM as a tree, you can see how you could travel “up” and “down” it, although you could say that “into” and “out of” the DOM would describe the travel more accurately. But you can see that to get to items that are deeper inside the DOM, you have to go through or into other items, right?

How does absolute positioning work?

An absolutely positioned element places itself based on the x and y coordinates you give it (x = left to right, y = top to bottom) by referencing whatever parent container it has that also has positioning specified. That bears repeating so read that again :). This is the most important thing to remember! Your absolutely positioned element will keep looking up the DOM until it finds a parent container that also has some type of positioning specified. If it can’t find one, it will go all the way up to the browser window and use that to begin counting its x and y offset.

In this illustration, the blue box represents an absolutely positioned object looking for reference. It finds none in its parent, the orange box, so it goes up to the parent of the orange box, and then to the parent of the parent of the orange box, etc. etc. etc..

How absolute positioning works: The element looks to its parents for where to begin counting its x/y offset.

How relative and absolute positioning work together

Of the four different types of positioning, only relative positioning is:

a non-static positioning property
that won’t alter the appearance of the parent container (as opposed to fixed positioning )

So when we specify “position: relative;” on the parent of your absolutely positioned element, the absolutely positioned element can then use that parent to calculate its offset.

And that’s how you do it! Read up on the four different types of positioning to understand the unique strengths and purposes of each one. Congrats! Now you can lay out elements and troubleshoot layout bugs confidently because you know how absolute and relative positioning work!