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

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Posted by Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Absolute positioning and parent element

In the code displayed in the video the parent element for the "li" items seems to be the main-header div.

If absolute positioning is contained in the parent element, then why did the li items move outside the header background to the bottom of the screen?

Thanks!

5 Answers

Shaun Earley
Shaun Earley
20,412 Points

The reason way the "li" item moved outside the parent element was because absolute positioning was placed on the "li" item with the class name ice cream. However there was no relative positioning place on the parent element (main-header), so the "il" item went all the way to the top of the page by default. If you add position relative to the parent item (main-header) the "li" item will move to the top of the parent element instead of the top of the page.

Jake Ford
Jake Ford
9,230 Points
Jake Ford
Jake Ford
9,230 Points

Thanks dude, this was a good explanation.

gary peart
gary peart
6,496 Points
gary peart
gary peart
6,496 Points

Thanks Shaun!

When I learnt some basic CSS years ago, I could never quite grasp the aspects of absolute and relative positioning. With your explanation Shaun, I've think you've 'hit the nail on it's head' for me. Finally!!!

GoldSpec Digital
GoldSpec Digital
4,185 Points
GoldSpec Digital
GoldSpec Digital
4,185 Points

This really helped me understand absolute positioning!

Kit Navock
Kit Navock
4,540 Points
Kit Navock
Kit Navock
4,540 Points

This was a good question! I was curious about the same thing. Just to add, I found a really good explanation:

"Absolute positioning removes the element it is applied to from the document flow so it does not affect sibling elements and sibling elements do not affect the absolute positioned element.

Absolute positioned elements behave differently depending on the position value of the parent. If the value is anything other than static the absolute child element will take up a position with respect to (relative to) the top left, inside edge of the parent.

If the immediate parent element is position: static the element will take it's position from the first positioned (non-static) ancestor, if no positioned ancestor exists the top left corner of the body will be used as the reference point, but ONLY if a value is given to one of the offset properties, if no offset is given it will remain located from the top left inside edges of the parent.

This ancestral referencing also extends to the width and height of a block element that is positioned absolutely. In a non-static parent and when sizes are given in percentage units, the width and height will be a percentage of the parent container, if the parent is static, the sizes will be a percentage of the closest positioned ancestor or if no positioned ancestor is found the width or height of the body will be used."

Chih-Wei Hsu
Chih-Wei Hsu
11,132 Points
Chih-Wei Hsu
Chih-Wei Hsu
11,132 Points

Thanks for the comment! I was wondering why when the position of <li>Ice Cream</li> was first set to "absolute", the li item didn't move to the top, left hand corner of the viewport but instead to the top left-hand corner of the <ul> element. And only when offsets were declared did the <li> item become positioned relative to the viewport.

Annamari Bán
Annamari Bán
5,071 Points
Annamari Bán
Annamari Bán
5,071 Points

I think I found the answer on MDN:

"The absolutely positioned element is positioned relative to nearest positioned ancestor (non static). If a positioned ancestor doesn't exist, the initial container is used."

We didn't have any positioned ancestor first in the video - that can be the reason Guil mentions the browser as the positioning context.

Farid Wilhelm Zimmermann
Farid Wilhelm Zimmermann
16,753 Points
Farid Wilhelm Zimmermann
Farid Wilhelm Zimmermann
16,753 Points

Found this on w3schools.com

"An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static."

Which makes a lot of sense. If any parent element of li would have been positioned in any way (except static), it would have been positioned relative to this parent element. But because thats not the case, it will be positioned relative to the <body>.

Annamari Bán
Annamari Bán
5,071 Points
Annamari Bán
Annamari Bán
5,071 Points

I think what makes us ask this good question is this: "When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context." One would think what Lindsay wrote, that the li item would stay inside the main-header div.

Thanks for the explanation, Shaun!