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! While you're at it, check out some resources Treehouse students have shared here.
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 trialsakatagintoki
12,624 PointsWhen 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.
5 Answers
Daniel Politz
6,338 PointsThis really helped me conceptualize the difference between them all. Hope it helps regardless of the delay in response :)
--> http://www.barelyfitz.com/screencast/html-training/css/positioning/
sakatagintoki
12,624 PointsThank you! Book marked!
Antonio Jaramillo
15,604 PointsThat was great. Thanks.
Wilson Lai
3,020 Pointsthx very much for the link!!
Thiago Nogueira
8,411 PointsThank you guys for sharing all this knowledge here! I was getting so confused! :)
sakatagintoki
12,624 Points"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.
sakatagintoki
12,624 PointsThe 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.
Caleb Sylvest
7,642 PointsGood luck! It will make sense with time :)
Jean-Pierre Robak
5,288 PointsThanks Caleb your links were very useful in explaining.
Caleb Sylvest
7,642 PointsCaleb Sylvest
7,642 PointsOne thing to note is the default positioning behavior is called 'static'.
So what I typically suggest is to think of positioning stuff in this order:
You also ask for use cases for using Absolute positioning. 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.
Read the articles below for more info about positioning. Also, there are tons of articles online about CSS positioning to help out . Positioning is one of those tricky aspects of CSS that, honestly, just takes some time and experience to get a grasp on.
Read these:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/