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
gurnbali
9,145 PointsUsing Relative Positioning, and the effects of using Top and Bottom.
Why do relatively positioned items go in the opposite direction of the property we set it to?
This odd behavior was briefly noted in the video, but there wasn't any explanation regarding as to why.
Example:
.main-logo, .main-nav { position: relative; }
.main-logo { bottom: 20px; }
The result is what the video described: The element moves up. But why? Does relative positioning invert all axis of the target element?
2 Answers
Julian Aramburu
11,368 PointsHi! What it really does is tell the browser "ok...so take the main-logo class element and place it 20px away FROM the bottom of the page". That's why it seems like if the axis were inverted.
Wilson Lai
3,020 PointsTo my understanding , from definiftion on mdz {-relative position- lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). }----The other elements are displayed as if "the relatived positioned element " were in its normal position and still occupy the original space ,therefore it is reversed in this sense