CSS Positioning

Let's talk about positioning today.

Positioning

We'll examine four position attributes we can use to manipulate the positioning of any HTML element. We have our simple Html document with a parent element and three child elements, One, Two and Three.

Our Styles document is straightforward and right now it contains no custom styling.

Static

The first position we'll check is the Static one. We have not defined any position attribute yet but if we check the document rendered

We can inspect the document and see the position set to static.
That is because static, is the default value given to all HTML elements' position attribute when rendered on the page.

Relative

Relative positioning works almost the same as static with a simple difference. Relative will allow you to define 4 position attributes top, bottom, left and right.

And the rendering

We have the same result, but if we change any of the four attributes, top, bottom, left or right

It results in

As you can see the element changed it's positioning relative to it's static position on the page rendering flow.
So the relative position element is taken out of it's default - static - position on the document render and repositioned relatively to it's parent element without affecting any other sibling elements on the page.

Absolute

Next let's check the absolute position. This one will completely remove the element from the page render flow, as if that element never existed.

Renders

This creates a unique situation when we manipulate the 4 attributes with an absolute positioned element.

Renders

In the above example, the absolute element repositioned itself relative to the document, because it's parent is positioned static and ended up at the top of the page. This creates a perfect way to couple relative and absolute positioning, let's change the parents' position to relative.

It renders

We can see above the absolute element repositioning itself relatively to it's parent relative position and ended up on the parent's top edge.

Fixed

Fixed positioning works differently as it "fixes" the position of the element relatively to the rendered html page and it doesn't bother with parent elements. A very important thing to remember with fixed elements, is that they will stay where you place them even when the page scrolls.

Renders

Sticky

Lastly we'll check the sticky position. It's a combination of both relative and fixed, as we can see at the examples bellow the sticky element behaves like a relative one when the page is rendered, but if the page scrolls down and that element reaches the top of the page, it will change behavior to fixed and stay at the top as the page scrolls.