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
Randy Cole
Courses Plus Student 2,494 Pointsposition: absolute?!?!
I'm completely confused on what exactly a value of absolute for the position property specifies. I get fixed, relative, and static but I can't seem to understand what dimensions it's (position: absolute) referencing when in this example it stacks one of the boxes in front of another after setting a position of absolute. I know position: static is default and is why the boxes normally sit atop one another in the document flow but I guess i'm missing why position: absolute changes that...
2 Answers
Johnny Garces
Courses Plus Student 8,551 Pointsabsolute positioning is a pain to understand at first. I think of an absolutely positioned element like a rude child that wants to defy his parent's authority (the parent being the containing element) and take up its own space wherever it wants.
In short the values that accompany an absolute position are: top, left, right, bottom. You could specify that an absolutely positioned element can be 10px from the top or bottom , 20px from the left or right.
Let's assume you have a child element that you want to position absolute. If you set that child as position absolute and taking up 10px from the top (top: 10px), it will be 10px from the parent element. If the child has no parent element, then it will be 10px from the browser.
I've shared a link on codepen illustrating what absolute positioning does to an element. The takeaway to consider is that this element will be positioned relative to its direct parent.
http://codepen.io/johnnyginbound/pen/JoKEJB
I'm still learning, but this is how I best understand absolute positioning. Let me know if this makes sense and is sound as an explanation. Thanks!
Johnny Garces
Courses Plus Student 8,551 Pointsno prob! glad it worked :)
Randy Cole
Courses Plus Student 2,494 PointsRandy Cole
Courses Plus Student 2,494 PointsOk I see now. The rude child analogy was perfect! After playing with the code a bit a keeping that analogy in mind it really made things a lot clearer. Thanks!