Created by Manuel Lorenz
Last Updated on July 16, 2018

# The Position Property

The position property allows us to change the position of elements on our website. No big news, but depending on the value applied to this property, the element behaviour changes.

Not sure about that? Let’s have a look behind the scenes of the position property and its values in this article!

You prefer watching videos? Have a look at the video on top of this article!


# Why we need “position”

By default, html elements follow a pre-defined behaviour - the document flow. Assuming that we have block-level elements only, this flow looks something like this: screen shot 2018 07 12 at 14 00 31 This default behaviour comes along with the position: static declaration, which is automatically applied to our elements and simply tells these to behave “normal”, so according to this document flow. For block-level elements within the same hierarchy, this means that each element is displayed one after another in separate lines.

If we want to position elements differently we need to change this behaviour. The position property is not only able to tell elements to follow the default flow, it also allows us to deviate from it by adding three different values to it:

  • absolute
  • relative
  • fixed

We also got sticky, but due to limited browser (well, Internet Explorer…) compatibility we’ll skip this one, at least in this article.

By applying one of these values, we can now change the default positioning of our elements, for example like this:

screen shot 2018 07 12 at 14 07 38 Anything is possible as the position property can have an impact onto both the document flow and the so-called positioning context of an element. So let’s dive into these now.

# Document Flow & Positioning Context

We already learned that position allows us to position elements according to the document flow but also to take our elements out of this flow.

Additionally, we can also add these four properties to our CSS code once we added a value different from static to our position property:

  • top
  • bottom
  • left
  • right

With these properties we can move elements on our website, for example top: 10px would move our element 10px down in relation to the top of … well of what actually?

We need a reference or a starting point to move our elements 10px down in relation to the top of another element. The positioning context defines this starting point. Specifically the positioning context can be the viewport or any element on our website, depending on the applied value.

Let’s keep that in mind and dive into the first value now, absolute.

Important

In case these concepts are completely new to you and you want to dive deeper, make sure to also have a look at our CSS - Complete Guide. In this 20h+ course we’ll dive into CSS from scratch and help you to master CSS.

# Position: “Absolute”

Make sure to download the starting project on top of the page (“SHOW RESOURCES”).

The orange area is the html element, body is yellow and the purple elements are divs. screen shot 2018 07 12 at 14 44 56 Adding position: absolute to header will change the way the elements are displayed: screen shot 2018 07 12 at 14 41 23 Where is the nav element? It’s below the header as this element was taken out of the document flow. It stayed at its initial position though - that’s why we can still see it -, but for the remaining elements the header is no longer existing. Therefore both nav and footer moved upwards and the height of the body decreased.

So position: absolute takes an element out of the document flow, but how can we position the header now?

Simply by adding top, bottom, left or right to it. In our example we’ll just add top: 0 and left: 0 and also remove any margin from the element:

screen shot 2018 07 12 at 15 11 56 Now the header is positioned in the left upper corner of the html element, which also shows us the new positioning context:
Whenever we add position: absolute to an element, it is by default positioned relatively to the html element which becomes the element’s positioning context (note: This is only true if no parent element has a position property applied, more about that later in this article).

So in our example, header has a distance of 0 pixels to the top and to the left of the html element.

As a side note: We can also see that the header no longer behaves like a block-level element but rather like an inline-block element. This also comes along with the position: absolute declaration we applied, but won’t affect our further understanding of the position property. Let’s dive a bit deeper and also add position: absolute to the body: screen shot 2018 07 12 at 16 02 51 Again the header positioning context changed - the header now is positioned in relation to the body.

This happens, because adding the position property with a value different than static to a parent of an absolutely positioned element, will turn this parent element into the positioning context of the absolutely positioned element.

Long sentence in simple words: The closest positioned parent will become the reference point for the position of the absolutely positioned element.

# Position: Relative

Time to change position: absolute to position: relative on the body element. As we can see on the screenshot, besides the fact that body behaves like a block-level element again, nothing changed. header is still positioned in relation to body: screen shot 2018 07 12 at 16 57 59 As we learned, no matter if we add absolute or relative (spoiler: or fixed) for the position property, both changes the positioning context of the child element (header in our case).

Let’s also add top: 0px to body as we previously did it for header. Surprisingly nothing changes, body doesn’t move. Why?

Because the positioning context for an element with position: relative is the element itself.

So in our example top: 0px simply means “move the element from the top to the bottom by 0px, starting from the element’s initial position (= the position according to the document flow)“.

Therefore adding top: 50px moves the element down by 50px from top to bottom (or left to right for left: 50px). screen shot 2018 07 12 at 17 08 06 This is how we can move relatively positioned elements, but what about the document flow? Adding position: relative to nav answers this question: The position of the element remains unchanged, because in contrast to absolute (another spoiler: or fixed), relative does not take the element out of the document flow. Therefore we are now able to position our element without impacting the document flow. You can easily try this out by adding top: 100px to nav, this will move the element down, but keep its position in the document flow (watch the gap above footer): screen shot 2018 07 12 at 17 19 20 # Position: Fixed What about the last value - fixed? Let’s add it to footer: screen shot 2018 07 12 at 17 25 50 As for absolute, the fixed value takes the element out of the document flow as you can see by the decreased height of the yellow body element. But what about the default positioning context, is it again the body element (remember, we added position: relative to body)?
Let’s check that, by adding top: 0px and remove the margin: screen shot 2018 07 12 at 17 32 25 Apparently footer is positioned in relation to the html element, so the position property of body doesn’t seem to play a role here.

But if we now scroll down (you might have to add height: 1000px to the html element to do so), we can see that footer remains at its position no matter where we scroll to.

This happens because fixed takes the document out of the document flow and changes the positioning context to the viewport. And it always remains the viewport, even if we add position: relative/absolute to a parent element.

That's the reason why `position: fixed` allows you to easily create fixed navigation bars like the one here on Academind.

With that we covered the core position values. If you want to dive (a lot) deeper, we would be more than happy to welcome you on board of our 5-star rated CSS - The Complete Guide course on Udemy.