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

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Posted by Tracy Excell
.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 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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 :)