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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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! 👍
Thanks for the kind words Christian. I’ll make sure to check out your post.
Thank you, Peter! I struggled a bit in explaining it simple, whereas you did very well imo =)
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)
Giving the parent element the position property definitely was a doozy!
"[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).
Thanks for the clarification Nick.
I always come here, thank Peter for your guides and plenty of resources that you make available for us!
Pleasure Jeremiah, what did you like about this post?
From your efforts and article i dont think i will ever again,research on positioning elements,Thank you man
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 🤦🏻
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.
This was clear and easy to understand. I needed this badly! Thanks for sharing Peter.
Thanks Paul. It’s comments like this that motivate me to keep writing.
Good job! 👍