Absolute vs. Relative — Explaining CSS Positioning

CSS positioning has long been an important part of creating website layouts. Even with the rise of CSS layout techniques such as 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 need to do is establish the CSS property for the position to tell the browser whether you're going to use absolute or relative positioning for a given element. You also need to 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 Positioning

Static is the default position for any element on a webpage. If you do not define the position of an element, it is static, which means that it displays on the screen based on where it is in the HTML document and how it displays inside the normal flow of that document.

If you apply positioning rules such as top or left to an element that has a static position, those rules are ignored, and the element remains where it appears in the normal document flow. You rarely, if ever, need to set an element to a static position in CSS because it 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-statically positioned ancestor. Because an absolutely positioned element is taken out of the normal flow of the document, it does affect how the elements before it or after it in the HTML are positioned on the webpage.

As an example, if you have a division that is positioned using a value of relative and inside that division, you have a paragraph that you want to position 50 pixels from the top of the division, you 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 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 uses the relatively positioned one as its context, and the positioning value you use is relative to 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 it has no non-statically positioned ancestors, then it is positioned relative to the body element, which is the highest level element of the page.

Relative Positioning

Relative positioning uses the same four positioning properties as absolute positioning, but instead of basing the position of the element upon its closest non-statically 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 webpage, and the third has a position: relative style placed on it, its position is offset based on its current location.

Paragraph 1.

Paragraph 2.

Paragraph 3.

In the above example, the third paragraph is positioned 2em from the left side of the container element but still below the first two paragraphs. It remains in the normal flow of the document and is offset slightly. If you change it to position: absolute, anything following it displays on top of it because it is no longer in the normal flow of the document.

Elements on a webpage 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 example, if you have a division surrounding your entire website with a class value of container, which is a 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 then scrolls past that element. 

To use this property value, you set:

position: fixed;

Keep in mind, when you fix an element in place on your site, it prints in that location when your webpage 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; }
}