Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Positioning Schemes Relative Positioning

Using 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.


.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
Julian Aramburu
11,367 Points

Hi! 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
Wilson Lai
3,020 Points

To 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