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

GoldSpec Digital
GoldSpec Digital
4,185 Points
Posted by GoldSpec Digital
GoldSpec Digital
4,185 Points

Absolute Positioning got me bamboozled!

Hi all,

So i've read all the questions and answers on this, but I just want to make sure that I have 100% have got this right...

So in the example, the <li> is within a <ul> which is within a <div>.

When using absolute positioning, the li has been positioning relative to the viewport.

This is because the <li> has no positioned ancestors.

So my question is,

  1. If a parent element, in this example the <ul> or the <div> is not given a position property, then by default, it is static?

  2. If you were to give the <ul>, or <div> a position value, then when you use absolute positioning on the <li>, it would be positioned relative to its containing element, and not the default top left of the browser window?

Many thanks,

Naomi

1 Answer

martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,819 Points

Hi,

  1. According to this link, any positions not set default to static: https://www.w3schools.com/cssref/pr_class_position.asp.

  2. Yes, if you give a parent element a position of relative and set a child element as absolute, the child element is positioned in relation to the parent element then and not the browser window.

I would highly recommend the course below, it is only 35 mins and will pay for itself 10x over when you want to get a better understanding of how things are working:

https://teamtreehouse.com/library/debugging-css-with-chrome-devtools

Hope this helps,

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

Hi,

Thanks for this - such a massive help!

:)