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 Foundations The Box Model Positioning Properties

Zoe Xiao
Zoe Xiao
7,195 Points
Posted by Zoe Xiao
Zoe Xiao
7,195 Points

about positioning properties

I can not understand the absolute position. When the teacher sets the position property of the middle box "absolute", the middle box is just on the top of the bottom box and the bottom box is not visible. Why is that? Thanks

4 Answers

Nicholas Klunder
Nicholas Klunder
8,144 Points
Nicholas Klunder
Nicholas Klunder
8,144 Points

Absolute positioning removes the element from normal document flow. So when the middle box has absolute positioning, the browser acts like it's not even there, and the bottom box slides up in it's place. Hope that helps!

Zoe Xiao
Zoe Xiao
7,195 Points
Zoe Xiao
Zoe Xiao
7,195 Points

But why doesn't the middle box overlap the top box?

Nicholas Klunder
Nicholas Klunder
8,144 Points
Nicholas Klunder
Nicholas Klunder
8,144 Points

If you haven't set any top, left, bottom, or right values, it will stay in It's original static position.

This page should be a big help to you, and will explain it better than i can: http://css-tricks.com/almanac/properties/p/position/

I hope you get it figured out :)

Zoe Xiao
Zoe Xiao
7,195 Points
Zoe Xiao
Zoe Xiao
7,195 Points

Thanks for your link. I just read it. I just could not understand why its static position should be under the top box. Why not elsewhere? And moreover, if the middle box is given the value "absolute", it can not get back to "static" cause it has been extracted from the normal flow I think.

Nicholas Klunder
Nicholas Klunder
8,144 Points
Nicholas Klunder
Nicholas Klunder
8,144 Points

Without any additional positioning values (top, left, bottom, right) in your CSS declaration, the browser assumes you want it in the original static location, except without it affecting document flow.

I just recently learned positioning myself, so I hope i'm not confusing you even further!

Zoe Xiao
Zoe Xiao
7,195 Points
Zoe Xiao
Zoe Xiao
7,195 Points

No worries...I am always very stubborn...haha