Welcome to the Treehouse Community
Looking to learn something new?
Arikaturika Tumojenko8,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.
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... ;-)
Casey Beaver5,606 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.