CSS Positioning: Static, Relative, Absolute, Fixed and Sticky

When it comes to positioning elements on a webpage, CSS provides several options to achieve the desired layout through the position property . Let’s explore the four main positioning values that offer the flexibility to place elements exactly where you want them.

Static Position

By default, all elements have a position value of static. This means that elements follow the normal flow of the document. They are usually positioned one below the other based on their order in the HTML markup. Usually, this is the desired behaviour and you don’t need to specify any positioning.

Relative Position

This is where things start getting interesting. The relative position value allows you to position an element relative to its original position in the document flow. Once an element is set to relative positioning, you can use the properties top, bottom, right and left to offset its position.

Consider this markup:

Let’s add some simple styles:

This is what the normal flow looks like:

Now let’s add position: relative and change the position of the second div element relative to itself.

This is what we see now.

Using the top and left properties, we have pushed the div 20px from top and 30px from left, relative to its original position. Note that the element will still occupy space in the normal document flow, and other elements will be placed as if the relative positioned element still took up its original space.

That’s the clear difference between using margin-top and top with relative positioning or margin-left and left.

Absolute Position

An element with absolute position value is removed from the normal document flow and placed relative to its closest parent whose position is set to any value other than static. If none of its parent nodes have a position specified, then the element is placed relative to body. Using top, bottom, left, and right properties, you can precisely position the element on the page or a container. It’s complicated to understand at once, so let’s look at an example.

Consider this markup:

Some simple styles:

In the normal flow, this is what the page looks like:

Now, let’s change the position of the span element to absolute:

Immediately, you’ll notice that the element has been removed from the normal flow and placed as a separate layer on top! But notice what happens when you set the top and left properties:

The span element is placed at the top left corner of the body element:

This is where a lot of beginners get confused. Since span is the child element of inner-parent, you would expect it to be placed relative to that div. This doesn’t happen because both the parent nodes, inner-parent and outer-parent don’t have any position specified. So its position is relative to that of body. Now, let’s add a relative position to outer-parent.

That’s all it takes for the span to be positioned relative to this outer parent now.

If you want the span to be positioned with respect to the tomato colored div, add position: relative to that one.

Now you see this:

You can now play around with the top, left, right and bottom values to move this span element within the inner parent. Try this:

Now it’s pushed from right and bottom edges by 10px.

Finally try setting all four values:

Isn’t this interesting?

You can make an absolute positioned element occupy full space of its parent. This is especially useful when you want to add a transparent overlay over an image or something. (Try adding opacity: 50% and you’ll know what I’m talking about).

Fixed Position

Elements with fixed position are placed relative to the browser window and remain fixed even when the page is scrolled. This is useful for elements like navigation bars or floating buttons like “back to top” or “chat with us” that need to stay in a fixed position on the screen.

Try this:

Now you can scroll down and see that the “Back to top” link stays fixed at the bottom right corner of the browser window.

Sticky Position

The sticky position is a combination of relative and fixed positions. This element acts as a relatively positioned element until a user scrolls to a certain position, after which it acts as a fixed element. This is particularly useful for creating sticky headers, navigation bars or side bars that remain visible as the user scrolls through the content.

Consider this example:

Here’s some CSS:

Scroll down and you’ll notice that the initially the navigation bar scrolls normally until the top of the navigation bar touches the browser window’s top (that is top:0px), after which the element behaves as a fixed one.

These concepts are surely quite confusing and it’s impossible to get a grip the very first time. Make sure to experiment a little and feel free to come back here in the future, for reference.