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

Posted by Jackson Monk
Jackson Monk
4,527 Points

CSS Absolute Positioning

I think CSS absolute positioning is a great way to customize the positions of your elements. However, resizing the page with them is a little different. I was wondering if anyone knows a way to keep the absolute elements stationary when resizing the page (I have already tried putting all code in a div with relative positioning, it distorted several of the elements on my page) Thanks in advance for any help.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I would help to show an example to demonstrate the issue, and include the code.

Jackson Monk
Jackson Monk
4,527 Points

Well I don't really have an example, I kind of wanted a general answer, but try copying and pasting this into a text editor:

<html>
<head>
<style>
div {
position: absolute;
padding: 30px;
background-color: black;
left: 50px;
bottom: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Copy and paste that into a text editor that runs that code in a web page, then try resizing the page (zoom) and you'll see what I mean.

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

The black square seems very stationary, remaining in the lower left as the page is resized in either dimension or both.

Perhaps you could post a screenshot or two of the "distortion"?