CSS can sometimes appear to be a shallow puddle. Not too complex, not too deep, easy to navigate. You add a few colours, change some font sizes, and specify the width and height of an image. You add more and more elements and styling. Then you refresh the page and it's a mess. This joke sums it up nicely:

Two CSS properties walk into a bar.
A barstool in a completely different bar falls over.

That shallow puddle somehow turned into Lake Baikal. How did you even get there?

Learning CSS can sometimes be frustrating, especially when elements don't behave intuitively. Positioning elements is no exception. So in this post I will explain how the position property works. We will cover four properties:

Relative Position

To start off I have assembled a family of boxes below. The dashed line containing the three boxes is the parent. The three containers within are the children namely: PINK (our main protagonist) and two twins named Iden and Ticle:

At this point it is important to note that all elements have default properties. In this case the default position property of PINK and the twins (and all elements for that matter) is "static". Keeping that in the following code (to move PINK down and right by 20px) ...

        .pink {
          top: 20px;
          left: 20px;
        }
      

... won't work. So we need to change the default behaviour of our elements by changing the position property to relative:

        .pink {
          position: relative;
          top: 20px;
          left: 20px;
        }
      

Refresh the page and we get:

Now its working. By changing PINK's position property from static to relative we are essentially level up and gain access to new properties, namely:

Here comes the important part. When we offsetted PINK by 20px down and to the right we did that relative to where it was previously. Did you also notice something? The twins are very considerate, they did not take the space of where PINK used to be. While we visually moved PINK the space it occupied did not move.

Absolute Positioning

USE WITH CAUTION. OVERUSE MIGHT BECOME ADDICTIVE. Not to be confused with Absolute vodka. But it is powerful. Once you realise the power of absolute positioning it might be tempting to place everything absolutely.

With absolute positioning you can place an element exactly where you want it to be on the page. Lets start by changing PINK's position to absolute and the parents position to relative (while keeping the offset properties the same).

      .parent {
        position: relative;
      }

      .pink {
        position: absolute;
        top: 20px;
        left: 20px;
      }
    

Essentially relative and absolute positioning does the same thing but there are some key differences:

(Also, did you notice anything peculiar? See the bonus material for more information. Hint: it has to do with the parents padding which is 10px.)

To demonstrate the second point further lets add another box called: Big Parent as below. Now when we shift position: relative from the smaller parent to Big Parent, PINK is now positioned absolutely, relative to the Big Parent:

Position Fixed

Now finally our last positional property: fixed. It's very much the same as absolute, however this time the element is positioned relative to your viewport.

The best way to illustrate this would be change PINK's position to fixed and position it to the bottom right corner of this screen.

While it is commoly used for navigation bars I instead used the "sticky" position for this website.

I want to thank Sindre Frisvold for reminding me of this neat trick.

Bonus Section

We all love bonus sections.

Bonus #1

I just want to briefly cover positioning elements with top, bottom, right and left because that always confused me in the past.

If we want to move PINK up by 40px and to the right by 70px we add the following code:

        .pink {
          position: relative;
          bottom: 40px;
          left: 70px;
        }
      

Think of it this way:

Bonus #2

Going back to where we change the position of PINK in "relative positioning" and "absolute positioning". Did you notice we specified the same top and left off-set for both sections yet PINK is closer to its original position when it was absolute than when it was relative?

What is happening here is that PINK is ignoring the parents padding of 10px when placed in absolute mode. See this post for more information.