Introduction

In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

CSS position is sometimes considered an advanced topic because it can do things that are somewhat unexpected. Well, don’t let “the experts” intimidate you from pursuing excellence in your CSS competence! It’s a very accessible topic once you’re equipped with some of the underlying ideas.

Render Flow

An important concept to understanding relative/absolute positioning is  render flow.

The general idea is that HTML elements all take up some space. Your browser’s rendering engine always renders everything in a grid-like fashion, starting at the top-left corner and moving successively towards the bottom-right until it’s done placing all of your HTML content.

If you’ve ever had a slow internet connection, and watched as large stuff on the webpage would push everything rightward and downward, that is essentially “render flow” in action.

You can change this default behavior using CSS position.

CSS Position

CSS position is sometimes considered an advanced skill because it’s not as intuitive as font-size or margin, etc., since it changes the natural “render flow” of the browser.

These are the possible values for CSS position:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

Copy

Today we’re just going to look at position: absolute and position: relative since they’re perhaps the most versatile ones that will get you a lot of mileage once you feel confident with them.

#css