DEV Community

Cover image for A painless guide to understanding CSS positioning

A painless guide to understanding CSS positioning

Peter on April 26, 2021

Developing an understanding of the CSS position property is important if you want to become really good at CSS. However, it can be one of the more ...
Collapse
 
christiankozalla profile image
Christian Kozalla

Thanks for that excellent post on positioning! I wrote a post about it recently, but in comparison, yours is well structured, detailed, and all in all a good read and a helpful reference! πŸ˜„

Good job! πŸ‘

Collapse
 
peterlunch profile image
Peter

Thanks for the kind words Christian. I’ll make sure to check out your post.

Collapse
 
christiankozalla profile image
Christian Kozalla

Thank you, Peter! I struggled a bit in explaining it simple, whereas you did very well imo =)

Collapse
 
anauthdes profile image
anauthdes

Nice and easy to follow guide, thanks for posting!
I'll have to share this one for sure.

I'm glad you included the important note for absolute positioning being inside other positioned elements. That one is always a doozy when you are trying to understand your elements and why they are floating in parts of the page you may not have intended.
And your sticky example is spot on, a great way to express lists and charts to be mobile first (despite maybe not being 100% supported yet)

Collapse
 
peterlunch profile image
Peter

Giving the parent element the position property definitely was a doozy!

Collapse
 
alohci profile image
Nicholas Stimpson

"[position:absolute] If there is no element with a position property value the element will be positioned relative to the html or viewport element."

Common mistake, but no. If there is no positioned ancestor element, the element will be positioned relative to the Initial Containing Block. You can think of the initial containing block as the container of the html element, not the html element itself. The Initial Containing Block in located at (0, 0) of the canvas, and has the height and width of the viewport. So different from the viewport because the viewport moves over the canvas and so isn't necessarily at (0, 0).

Collapse
 
peterlunch profile image
Peter

Thanks for the clarification Nick.

Collapse
 
jreegene profile image
Jeremiah

I always come here, thank Peter for your guides and plenty of resources that you make available for us!

Collapse
 
peterlunch profile image
Peter

Pleasure Jeremiah, what did you like about this post?

Collapse
 
jussymashunye profile image
justice mashunye

From your efforts and article i dont think i will ever again,research on positioning elements,Thank you man

Collapse
 
pshuffle profile image
Thomas Shepard

Wow this is really comprehensive. I did not know you needed to set the parent to relative for absolute to work it explains a lot about things I've tried in the past 🀦🏻

Collapse
 
peterlunch profile image
Peter

Thanks I tried to go into enough details so it was extensive without being to painful. I was in the same boat I couldn't figure out why my absolute positioning wasn't where I wanted it but now I know through writing this post its because I hadn't set the parent element to have a position other than static.

Collapse
 
paularah profile image
Paul Arah

This was clear and easy to understand. I needed this badly! Thanks for sharing Peter.

Collapse
 
peterlunch profile image
Peter

Thanks Paul. It’s comments like this that motivate me to keep writing.

Collapse
 
chupavn profile image
chupavn

Good job! πŸ‘