# The Position Property
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”
htmlelements follow a pre-defined behaviour - the document flow. Assuming that we have block-level elements only, this flow looks something like this: This default behaviour comes along with the
position: staticdeclaration, 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:
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:
positionproperty 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
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,
# Position: “Absolute”
Make sure to download the starting project on top of the page (“SHOW RESOURCES”).
bodyis yellow and the purple elements are
headerwill change the way the elements are displayed: Where is the
navelement? It’s below the
headeras 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
headeris no longer existing. Therefore both
footermoved upwards and the height of the
position: absolute takes an element out of the document flow, but how can we position the
Simply by adding
right to it. In our example we’ll just add
top: 0 and
left: 0 and also remove any
margin from the element:
headeris positioned in the left upper corner of the
htmlelement, which also shows us the new positioning context:
position: absoluteto an element, it is by default positioned relatively to the
htmlelement 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
headerno longer behaves like a block-level element but rather like an inline-block element. This also comes along with the
position: absolutedeclaration we applied, but won’t affect our further understanding of the
positionproperty. Let’s dive a bit deeper and also add
position: absoluteto the
body: Again the
headerpositioning context changed - the
headernow is positioned in relation to the
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
position: relativeon the
bodyelement. As we can see on the screenshot, besides the fact that
bodybehaves like a block-level element again, nothing changed.
headeris still positioned in relation to
body: As we learned, no matter if we add
fixed) for the
positionproperty, both changes the positioning context of the child element (
headerin 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)“.
top: 50pxmoves the element down by 50px from top to bottom (or left to right for
left: 50px). This is how we can move relatively positioned elements, but what about the document flow? Adding
navanswers this question: The position of the element remains unchanged, because in contrast to
absolute(another spoiler: or
relativedoes 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
nav, this will move the element down, but keep its position in the document flow (watch the gap above
footer): # Position: Fixed What about the last value -
fixed? Let’s add it to
footer: As for
fixedvalue takes the element out of the document flow as you can see by the decreased
heightof the yellow
bodyelement. But what about the default positioning context, is it again the
bodyelement (remember, we added
top: 0pxand remove the
footeris positioned in relation to the
htmlelement, so the
bodydoesn’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.
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.