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 trialPaul M
16,370 PointsUsing Absolute Positioning With Smaller Screens
I noticed some changes when I resized the page, why does this happen?
1 Answer
laurasammons
16,723 PointsThe 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.
Steven Parker
231,275 PointsSteven Parker
231,275 PointsIt 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.