Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

CSS relative and absolute positioning

The logo's absolute position is relative to the browser viewport. Make .card the new positioning context for .logo.

.logo { position: absolute; top: -45px; left: 125px; }

I am having trouble with this code challenge. Can someone please explain it to me?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,705 Points

Okay so when you position elements absolute, that element is only absolute in the scope of the next parent element that is set to relative.

To put it another way if I had 2 elements, a container element that is set to relative positioning and inside that a div that is set to absolute, I could only posiition the div inside the containing element,

Example:

<div id ="container">

   <div class="positioned-element">Content goes here</div>
</div>
#container {
   position: relative;
   width: 500px;
   height: 500px;
   left: 50px;
   top: 50px;
}

.positioned-element {
   position: absolute;
   left: 100px;
   top: 300px;
}

So here the position context is the container element, with the id of "container". The position of the class div can only exist inside the width of the container element. If I was to try to position it outside the 500px x500px element it would be cut off and start to disappear or only partially show up.

Hope this helps :)