The CSS Position Property Explained - with Examples

Positioning may be foundational for designing all kinds of layouts across the web and yet after over a year into my web development journey, I am starting to get the hang of CSS position 😉

You know how people google how to center a div everytime?

Or how they spend hours of trying to fit several elements into the intended alignment?

I can remember those times for myself. 😒

One reason to get stuck writing CSS: Writing CSS rules is easy, but if the result is not as intended, CSS gives no feedback on what went wrong, no error message thrown, so you're left off where you started and none the wiser. 😡

It's terrible to debug CSS. 😢

It's not enough to know what you want to achieve and gradually approach a solution, e.g. fixing console errors one-by-one like in scripting languages.

I realized it is essential to have a solid understanding of fundamental concepts of CSS and how the browser puts CSS rules into practice. 🚀

The Gist of CSS position

top, left, right, bottom, z-index properties can be used in conjuction with different values of position. These are absolute, relative, fixed and sticky.

It is crucial to know, what the values entered in top, left, right, bottom, z-index refer to!

• position: static (default) - top, left, right, bottom, z-index have no effect
• position: absolute - top, left, right, bottom refer to element's nearest containing block (mostly the body element, if no ancestor has a position value other than static)
• position: relative - top, left, right, bottom are relative to the element's original place in the normal flow (as if position was static)
• position: fixed - top, left, right, bottom are relative to to the viewport
• position: sticky - treated like a relatively positioned element until it would exit the viewport. Instead, top, left, right, bottom set the distance to the edges of the viewport

When to use CSS positioning?

When you want to take an element out of the normal document flow in order to position it where you desire.

position targets a single element. So if it's your goal to design a complete, responsive layout, it could be better to use display: flex || grid

With fixed and sticky positioning it is possible to tell an element to stay in the viewport - even if the user scrolled away.

position property values in-depth

position: absolute

.positioned-absolute {
  position: absolute;
  top: 50px;
  left: 200px;
}

The above example pushes the element 50px down from the top and 200px away from the left.

• position: absolute takes an element out of the normal flow. It usually ends up on the top left corner of the page - unless it has got a parent that's position property is not static (read more about an element's nearest containing block)
• No space is reserved for the element (i.e. no gap in the normal flow)

position: relative

.positioned-relative {
  position: relative;
  top: 50px;
  left: 200px;
}

The above example pushes the element 50px down and 200px to the left, but relative to it's original position in the document flow.

• position: relative leaves an element in the normal flow.
• Positioning relative to original position with top, left, right, bottom and z-index
• Space is reserved for the element.

position: fixed - similar to absolute but fixed to viewport

A fixed element is taken out of the normal flow with no space reserved. It is rendered fixed to the viewport positioned with top, left, right, bottom.

position: sticky - similar to relative but sticks to viewport

Initially, the sticky element is rendered in its original position (like with position: relative). If the element is scrolled out of view, it keeps the distances set with top, left, right, bottom to the edges of the viewport.

So it stays in view!

---

CSS position examples

To explain all possible values of CSS positioning, I made a CodePen that illustrates the different behavior on individually colored boxes

• position: static - This is the default value. The element is part of the normal document flow
• position: relative - The element has reserved space in the normal document flow, but can be adjusted relative to its origin with top, left, right, bottom, z-index

Another example - Structuring a recipe with sticky headlines above each step

I saw this on a cooking website, where recipes are shared and stuff. I found it kinda cool, so I rebuilt it in this pen.
With the sticky headlines, the user can easily see which step they're looking at. 😄

Recap positioning in CSS

The position property has five values static (default), absolute, relative, fixed and sticky

When position is set to something other than static, these other CSS properties enable advanced positioning: top, left, right, bottom

Most important to know: What are values set in top, left, right, bottom referring to!

That's it for CSS positioning!

Stay tuned && happy coding!

---

I hope you enjoyed my post! If so, I'd be over the moon if you'd check out my blog or followed me on Twitter ❤️

Comments

[Temani Afif]

Sticky deosn't always stick to the viewport but to the nearest ancestor having a scrolling box. A bit trick as concept (related: stackoverflow.com/q/55592104/8620333). In other words, it's the first ancestor with overflow different from visible (that's why overflow:hidden is a hassle for sticky, also related: stackoverflow.com/a/54806576/8620333)

[Christian Kozalla]

You're absolutely right! I didn't know how to phrase it simply, so I omitted the fact..
👍Thanks!