When I first learned how to code creating a layout and positioning things properly in CSS caused me a huge headache.

Usually, I ended up playing around with the various values, static, fixed, absolute, relative & sticky to make things work.

In this post, I want to explain how positioning in CSS actually works.

Hopefully, after reading this, it will also help you make more sense of this often frustrating topic.

Positioning in CSS: Why Use It In The First Place?

If you’re building any type of website, you need to layout the elements so they appear as you want them to appear.

You want them to look nice, right?

Positioning elements nicely can be super helpful. In fact, it’s a pre-requisite for many common tasks when building a website, e.g. positioning a logo within a navigation bar or adding an icon to an input field.

The position property in CSS lets you do exactly that and gives you awesome flexibility when creating your layout.

Using position alongside its various values allows you to define how you two or more elements are laid out with one another.

What values am I referring to?

There are five different position values you can use:

  • static
  • relative
  • fixed
  • absolute
  • sticky

In addition to these position values, you also have top, left, right, bottom and z-index properties.

Are you confused yet?

Don’t be.

We’ll cover those bits in a bit.

But first, let’s look into each of those values and see what they actually do and how they work. We start with static.

What Is Position: Static ?

Position: static is the default. Every time you create a new HTML element, this element will be positioned static.

Elements that are positioned statically will appear on the page in the ‘normal flow’.

What in the heck do you mean by ‘flow’, Carsten?

Let’s say, you have two or more elements one after the other, they will appear below one another, right? It’s just how elements are normally positioned without tweaking the CSS.

Below’s a quick demo to illustrate this.

First, let’s create two boxes, a green one and a purple one.
(Note: I’ve given them a parent and child class, which will make much more sense later. You could also name them one, two or whatever)

The HTML looks like this:

<div class="parent green">
  <b>Position: static;</b> 
</div> 

<div class="child purple">
  <b>Position: static;</b><br>
  top: 50; (this has no effect) 
</div>

Second, let’s quickly create a CSS file and slap on width & height as well as background-color so we can quickly differentiate between the two boxes.

The CSS looks like this:

* {  
  box-sizing: border-box;
}

body {  
  color: white;  
  font-family: 'Open Sans', Arial, sans-serif;  
  font-size: 14px;
}

.parent, .child {  
  width: 600px;  
  height: 100px;  
  padding: 20px;
}

.green {  
  background-color: green;
}

.purple {
  background-color: purple;
}

.red {
  background-color: red;
}

And here’s the result on CodePen:

See the Pen Positioning In CSS by Carsten Pleiser (@ckpleiser) on CodePen.

Simple enough. Nothing special here.

The two <div> elements will automatically position themselves according to the flow of the document.

Remember, setting position to static is the same as not setting the position element at all.

Why does this matter? It might not make sense to you now, but forgetting to position an element can break your layout and give you huge headaches.

Read on to understand why!

Positioning in CSS with relative

Remember, a positioned element is one whose position is anything than the default static one, e.g. top, left, right & bottom.

And what does position: relative do to our elements?

Well, it gives us the ability to position it in relation to another element. Using position: relative won’t break an element out of the normal flow of a website, but we have more control.

Taking the example from above and changing the code like so:

.parent {
  position: static;
}

.child {
  position: relative;
  top: 30px; 
}

will actually position the purple box 30px below the green box:

See the Pen Positioning In CSS: Relative by Carsten Pleiser (@ckpleiser) on CodePen.

So far, we used two divs as siblings. What if we actually nested the child element within the parent element and gave both elements position: relative?

See the Pen Positioning In CSS: Relative As Child by Carsten Pleiser (@ckpleiser) on CodePen.

You can see that the nested element is relatively positioned within its parent. Adding top: 0px; and left: 0px;to the child element, will align it nicely on the top left corner. (This is exactly where the text of the parent starts)

Positioning in CSS with absolute

Now, this is about to go crazy. Let’s introduce position: absolute

It will take your element out of the normal flow of the website. Basically, instead of our two boxes being nicely displayed underneath one another, the element will be taken out of this flow entirely.

What happens if we take the previous example and assigned the child element position: absolute instead of position: relative?

See the Pen Positioning In CSS: Absolute As Child by Carsten Pleiser (@ckpleiser) on CodePen.

You can see that it breaks out of the flow of the website. Essentially, it becomes a new additional layer (instead of being underneath the purple box).

I’ve set the top and left properties to 50% and this will be relative to the parent element as the parent element is set to position: relative

Here’s something that can often lead to layout mistakes. If you don’t position the parent element (e.g. give it a position: relative) the absolutely positioned element will use the document body instead.

Nasty!

See the Pen Positioning In CSS: Absolute Without Ancestor by Carsten Pleiser (@ckpleiser) on CodePen.

Look at this ☝️

The child element didn’t have an ancestor (parent) to attach to, so it simply uses the document body.

This is the reason why it causes so many developers huge headaches and why positioning elements with CSS correctly can make or break your design.

What’s position: fixed?

An element that you position with position: fixed will always remain in the same place, even if you scroll up or down.

And what the heck is position: sticky ?

Position: sticky seems to behave just like position: relative, but there is one major difference.

If you keep scrolling, elements that are positioned with sticky will be taken out of the normal flow of the website and behave like position: fixed

Basically, it switches between relative and sticky depending on the scroll position:

See the Pen Positioning In CSS: Sticky by Carsten Pleiser (@ckpleiser) on CodePen.

A word of caution: Modern browsers support it, but Internet Explorer/Edge 15 and earlier versions do not support position: sticky. You can check which features are supported via CanIUse.com

Conclusion

I hope you found this guide a little helpful. If you’d like to follow my journey learning how to code, follow me on LinkedIn or Twitter.

Other resources you might want to check out:

(Visited 56 times, 1 visits today)

Leave A Comment

Your email address will not be published. Required fields are marked *