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 trial

CSS CSS Layout Techniques Positioning Schemes Absolute Positioning

Posted by sakatagintoki
sakatagintoki
12,624 Points

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.

Caleb Sylvest
Caleb Sylvest
7,642 Points

One 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:

  1. Static. Work with the standard document flow.
  2. Floats. Float containers or elements (and always clear floats).
  3. Out of Flow Positioning. Use absolute or fixed positioning to remove elements from the flow.

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/

5 Answers

Daniel Politz
Daniel Politz
6,338 Points
Daniel Politz
Daniel Politz
6,338 Points

This 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
sakatagintoki
12,624 Points

Thank you! Book marked!

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

That was great. Thanks.

Wilson Lai
Wilson Lai
3,020 Points
Wilson Lai
Wilson Lai
3,020 Points

thx very much for the link!!

Thiago Nogueira
Thiago Nogueira
8,411 Points
Thiago Nogueira
Thiago Nogueira
8,411 Points

Thank you guys for sharing all this knowledge here! I was getting so confused! :)

sakatagintoki
sakatagintoki
12,624 Points
sakatagintoki
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
sakatagintoki
12,624 Points
sakatagintoki
sakatagintoki
12,624 Points

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.

Caleb Sylvest
Caleb Sylvest
7,642 Points

Good luck! It will make sense with time :)

Jean-Pierre Robak
Jean-Pierre Robak
5,288 Points
Jean-Pierre Robak
Jean-Pierre Robak
5,288 Points

Thanks Caleb your links were very useful in explaining.