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

HTML Accessibility Web Apps Charts and Graphs

Stefaan De Reu
Stefaan De Reu
2,429 Points
Posted by Stefaan De Reu
Stefaan De Reu
2,429 Points

Can you explain me the "position" rule a bit more?

More specific, what happens when you uses the position:relative in this context?

2 Answers

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

Two great resources on CSS position property: MDN Docs and CSS-Tricks.

Simply put, applying position: relative by itself doesn't change the position of the element on the page, but basically allows you to set z-index, top, right, bottom, & left values on itself as well as position any child elements absolutely inside it. Check out those links and play around with it on Codepen or something to get the hang of it.

Gabriel E
Gabriel E
8,916 Points

Stefaan, and just to add to what Matt said, z-index allows you to change the layering of elements on a page. This can be handy if you have an image that needs to be set back so text can flow visibly over it.

Matt Brock
Matt Brock
28,330 Points

Thanks for the addition, Gabriel! Forgot to mention that :)

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

The default value for a position is "static", which essentially is "relative".

Here's a quick breakdown for you:

position: relative;

Relative - Where you currently are. Other elements will affect a relative position, as it's much like throwing blocks into a container. If one block takes more space, or is heavier, it will move the other blocks to make room for it.

position: absolute;

Absolute - Often the child of a relative element, it can be positioned anywhere it wants to be without disrupting the layout at all. As long as it's inside of a relative element, it can be restricted to that area. If it's not within a relative element, the parent will be the entire page with an "I'll go where I wanna go!" attitude. It will always scroll with the page, which brings us to...

position: fixed;

Fixed - The equivalent to using a hammer and nail on the viewport to your layout. No matter what's around it, it will never move, even when you scroll the page.

Matt Brock
Matt Brock
28,330 Points

Steven, I agree with those definitions, except that an absolutely positioned element doesn't have to physically reside inside the parent position: relative element. Take this comment area and avatar for a crude example (simplified markup):

<div class="comment-box">
  <p>...</p>
  <div class="avatar"></div>
</div>

Semantically, .avatar is contained inside .comment-box, but I can position it anywhere on the page with reference to the closest ancestor element that has a position: relative property. Since I've given .comment-box a position: relative, .avatar will be positioned relative to that element (or, rather, to its top-left corner by default).

.comment-box {
  position: relative;
  // other styles
}

.avatar {
  position: absolute;
  top: 15px;
  left: -50px;
  // other styles
}

If an absolutely positioned element has no ancestor with position: relative, it will be positioned in reference to the "oldest" element in the document, which is <html>. Thus, the .avatar would end up being 15px down and 50px to the left of the window, and would not be visible!

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I totally agree, however...

As long as it's inside of a relative element, it can be restricted to that area. If it's not within a relative element, the parent will be the entire page with an "I'll go where I wanna go!" attitude.

...was basically my way of saying that, so any student will understand "Why" in the simplest way possible (with yours being a more technically specific version.) I've had dozens of students, from 12 to 85+, that found themselves overwhelmed with the details because the foundation for explaining the solution was never setup properly (especially while participating in a course or workshop, where most teachers will expect them to already understand things they may not.)

A good example would be when the words "parent", "child", "sibling" and "element" are combined without simply referring to them as a "div" or "span" at first (or any other type of element with a start and end tag), then showing the student how to nest them by tabbing. It forms - for lack of a better term - a visual basket, and then we take that and get them used to understanding that they are all "elements" that relate to each other as a "parent", "child", or "sibling" according to how the code was written by them. :)