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 Layout Basics Positioning Page Content How Absolute Positioning Works

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Which is the rightful parent container of the li elements in this case?

I understand the li elements position relative to the browser window is the parent container it's not given a position relative, but in this case what's the parent container of the li elements? Isn't it the <ul>? Thx.

2 Answers

Unsubscribed User
seal-mask
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 33,900 Points
Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 33,900 Points

Yes, the parent of <li> is <ul>.

I just watched the video once more and you probably want to know why the "ice cream" <li> is placed at the top left of <ul> when its position is "absolute" even though <ul> is not positioned relative yet? I am also a bit curious...

I understood it like when the absolute postioned element is not given an exact position (with top, bottom, left, right...) then it will be placed at the beginning of the parent element. Only once it is given an exact position will it be placed relative to the browser window (if no other parent element has a position of relative value).

My intuitive understanding would have been that once given the position value absolute the list item should be directly placed at the top left corner of the browser (if no other parent element has a relative position) but it seems like this only happens if it is given an exact position value.

But I am also still learning and layout sometimes still makes me scratch my head... ;-)

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

This is explained in the next video. The layout is a bit confusing so I suggest you remove the padding from the body so the main div will perfectly align with the body. Maybe also give a border to the <ul>.

Absolute positioning - the element will always position relative to the body IF it doesn't have a container that's positioned relative. Once we change the position context by giving any container a relative position, then the element will position itself relative to that container.

I watched all the videos by now and everything makes more sense. Thx!

Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 33,900 Points

-> "Absolute positioning - the element will always position relative to the body IF it doesn't have a container that's positioned relative. "

That I understand completely.

But the thing is that this only seems to apply when you also give further detail (with top, left, etc.). Otherwhise it is placed in the left top corner of the direct parent element. Ýou see that in the video at the beginning when he just uses "position: absolute" for the .ice-cream li. Try it out and just give .ice-cream a postion of absolute - check. And then give the ul (.main-nav) a position of relative - check again. No difference as long as you do not specify any further details.

Only once you also declare further details with top, left etc is it positioned relative to the <html> (not the <body> actually).

Casey Beaver
Casey Beaver
5,619 Points
Casey Beaver
Casey Beaver
5,619 Points

You'll learn in the next video:

Absolute = positioning is from inside of element's first parent container that has a position set to relative. If none of the containers (housing the absolutely positioned element) are positioned relative, then it defaults to the browser.

So because the <li> isn't in anything that is positioned relative, it defaults to the browser.

Edit: li > ul > main-nav > main-header is the family generations (prob wrong term but I'm new too) with the youngest at the left. So the first parent would be <ul>. If <ul> isnt relative, the code would then look to <main-nav> and so on for a position of relative until it finally settles for the browser when it finds no relative position.