Absolute vs. Relative - Explaining CSS Positioning

CSS Positioning is More than Just X,Y Coordinates

Centered arrows
Image courtesy Westend61 / Getty Images

CSS positioning has long been an important part of creating website layouts. Even with the rise of newer CSS layout techniques like Flexbox and CSS Grid, positioning still has an important place in any web designer's bag of tricks.

When using CSS positioning, the first thing you will need to do is establish the CSS property for position to tell the browser if you're going to use absolute or relative positioning for a given element.

You also need to clearly understand the difference between these two positioning properties.

While absolute and relative are the two CSS position properties most often used in web design, there are actually four states to the position property:

  • static
  • absolute
  • relative
  • fixed

Static is the default position for any element on a web page. If you do not define the position of an element, it will be static. This means that it will display on the screen based on where it is in the HTML document and how it would display inside the normal flow of that document.

If you apply positioning rules like top or left to an element that has a static position, those rules will be ignored and the element will remain where it appears in normal document flow. In truth, you would rarely, if ever, need to set an element to a static position in CSS since that is the default value.

Absolute CSS Positioning

Absolute positioning is probably the easiest CSS position to understand.

You start with this CSS position property:

position: absolute;

This value tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and instead placed in an exact location on the page. This is calculated based on that element's closest non-staticly positioned ancestor.

Because an absolutely positioned element is taken out of the normal flow of the document, it will not affect how the elements before it or after it in the HTML are positioned on the web page.

As an example - if you had a division that was positioned using a value of relative (we will look at this value shortly), and inside that division you had a paragraph that you wanted to position 50 pixels from the top of the division, you would add a position value of "absolute" to that paragraph along with an offset value of 50px on the "top" property, like this.

position: absolute;
top: 50px;

This absolutely positioned element would then always display 50 pixels from the top of that relatively positioned division - no matter what else displays there in normal flow.  Your "absolutely" positioned element used the relatively positioned one as its context and the positing value you use is relative that that.

The four positioning properties that you have available to use are:

  • top
  • right
  • bottom
  • left

You can use either top or bottom (since an element cannot be positioned according to both of these values) and either right or left.

If an element is set to a position of absolute, but there it has no non-staticly positioned ancestors, then it will be positioned relative to the body element, which is the highest level element of the page.

Relative Positioning

We already mentioned relative positioning, so let's look at that property now.

Relative positioning uses the same four positioning properties as absolute positioning, but instead of basing the position of the element upon its closest non-staticly positioned ancestor, it starts from where the element would be if it were still in the normal flow.

For example, if you have three paragraphs on your web page, and the third has a "position: relative" style placed on it, it's position will be offset based on it's current location.

 <p>Paragraph 1.</p>
 <p>Paragraph 2.</p>
 <p style="position: relative;left: 2em;">Paragraph 3.</p>

In the above example, the third paragraph will be positioned 2em from the left side of the container element, but will still be below the first two paragraphs.

It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.

Elements on a web page are often used to set a value of position: relative with no offset value established, which means that element remains exactly where it would appear in normal flow. This is done solely to establish that element as a context against which other elements can be positioned absolutely. For instance, if you have a division surrounding your entire website with a class value of "container" (which is a very common scenario in web design), that division can be set to a position of relative so that anything inside of it can use it as a positioning context.

What About Fixed Positioning?

Fixed positioning is a lot like absolute positioning. The position of the element is calculated in the same way as the absolute model, but fixed elements are then fixed in that location- almost like a watermark. Everything else on the page will then scroll past that element. 

To use this property value, you would set:

position: fixed;

Keep in mind, when you fix an element in place on your site, it will print in that location when your Web page is printed out. For example, if your element is fixed at the top of your page, it will appear at the top of every printed page - because it's fixed to the top of the page. You can use media types to change how the printed pages display fixed elements:

@media screen {
 h1#first { position: fixed; }
 }
 @media print {
 h1#first { position: static; }
 }

Original article by Jennifer Krynin. Edited by Jeremy Girard on 1/7/16.