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 Grid Layout Testing our Grid

Marston Gould
seal-mask
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points

Method selection

After viewing this course, one of the thoughts that occurred to me is that while I think I have a good handle on how to accomplish each of the different methods: relative, absolute, fixed, flexbox, etc. I'm not really sure how should a designer decide on which approach makes the most sense of their project.

1 Answer

Domen Stojic
Domen Stojic
31,376 Points

Well to make it simple you will understand it better when you create a couple of your own projects where you will see that you use them all but in very different circumstances! It really depends on the effect that you want to create and how much you want to interact with the site. Mostly you will use relative positioning but in case of navbars a fixed position could be usefull and then again if you are going to stack items on each other you will probably use absolute positioning with z-index or so...

During the creation of your project you will probably change your navigation style and look & feel of the site often quite often. To help you through this it is less time consuming to first create a sketch of the design, add function and layout changes. This will help you decide much faster!

For additional info you can use: http://www.w3schools.com/css/css_positioning.asp http://css-tricks.com/almanac/properties/p/position/