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

Paul M
Paul M
16,370 Points
Posted by Paul M
Paul M
16,370 Points

Using Absolute Positioning With Smaller Screens

I noticed some changes when I resized the page, why does this happen?

Steven Parker
Steven Parker
229,771 Points
Steven Parker
Steven Parker
229,771 Points

It would help if you share your code (be sure to blockquote it properly). Even better, make a snapshot of your workspace and post the link to it here.

1 Answer

laurasammons
laurasammons
16,723 Points
laurasammons
laurasammons
16,723 Points

The position property relies on a “positioning context” to know where to place your absolutely positioned elements.

The default for an absolutely positioned item will be the browser window viewport, unless you tell it otherwise.

In this example, the <li> with the class “ice cream” has been absolutely positioned using pixel units. Pixel units are immutable and will not change no matter how the viewport width or height changes.

The <li> with the class “tea” was absolutely positioned, but it used relative units to place itself from the right, from the bottom — using em and percentage respectively. Relative units scale. Therefore, as the size of the browser window changes, so does the placement of the element change along with it.