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

Posted by Matt Bell
Matt Bell
186 Points

CSS position explanation

Hey Everyone!

So there's one thing i just cant get my head around with CSS... I really don't understand CSS positioning, I never know which one to use when I experiment building sites. Is anyone able to explain which one to use in which scenario? I can't seem to find anything that helps me understand it. If had problems where I have added a logo to the nav bar and used CSS positioning such as "Top:30px; and Left:10px; to get the logo to the position I want but different CSS positions seem to mess up the logo, it moves as I scroll down the page with a fixed positioning and then does the same with relative positioning. I also always include "Display:block;" when using any of the position elements. So as you can see, I'm getting a little confused with it. If anyone is able to help me out then I would greatly appreciate it.

1 Answer

john larson
john larson
16,594 Points

Positioning: relative, absolute, static and fixed ARE pretty confusing. They are a subject all in themselves. Positioning is useful in special circumstances. Fixed for example. If you have some bit of information, always at the bottom right window...use fixed. It stays there even when the window is scrolled. Static is default. It is where it is. Relative and absolute work together. Absolute is often used (that I have seen) in doing overlays. Which you probably haven't got to yet. To make an overlay, make it 100% width and height, and position it top 0 left 0 so it fills the whole screen. That's a little bit about it. Here is a place to explore it more http://www.w3schools.com/cssref/pr_class_position.asp

Matt Bell
Matt Bell
186 Points

Thanks so much John! This is VERY helpful and I really appreciate your great response.