Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
When do I use absolute positioning? And when do I use relative positioning?
I think I understand the differences between absolute and relative positioning. And I make notes as I watch each video. Here are my notes.
Relative Positioning: Elements positioned relative are still in the normal document flow. They don't influence the layout of surrounding elements. (kk, got it)
Absolute Positioning: Elements positioned absolute are relative to its first parent that is positioned relative. (kk, got it)
If no parent element is positioned relative, then the browser viewport is the positioning context by default. (kk, got it)
Absolute positioning removes elements from the document flow. (kk, got it)
I grasp all of these facts. What I’m still unclear on is when exactly should I use relative positioning and when exactly should I use absolute? It seems absolute positioning just messes things up, and requires further adjustment, and it would be better to stick with relative positioning, flexboxes, floating & clear-fixing and the like.
So, when should I use absolute? When should I use relative?
Sorry if this is really simple and I'm being a bit thick. Maybe I’ve been Treehousing too much today and should take a break.
Daniel Politz6,338 Points
This really helped me conceptualize the difference between them all. Hope it helps regardless of the delay in response :)
Thiago Nogueira8,411 Points
Thank you guys for sharing all this knowledge here! I was getting so confused! :)
"Usually you would only absolutely position something if you can't use any other positioning method to get make the layout work. An example would be positioning icons or elements inside a container."
I think this was what I was looking for. Thanks. I'll bookmark the links you posted and read them this evenin' too.
The following exercise 'absolute centering', which I completed just now, also cleared up your point too. Think I'll get the hang of this. Just need to play with Chrome dev tools.