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 Foundations The Box Model Positioning Properties

Posted by Nelson Fortes
Nelson Fortes
3,145 Points

hi everyone having trouble with this one

Set its position to relative, then offset it 80px from the left and move it up -20px.

I feel like I should use z-index im not too sure heres my code so far.

Nelson Fortes
Nelson Fortes
3,145 Points

crap I couldnt post it but i was something like

.bottom {margin-left:80px 0 -20px; z-index:20px;

3 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Nelson, you have to use the top and left properties here. Here's how your code should be at the end of the challenge:

/* Complete the challenge by writing CSS below */
div.wrapper {
  position: relative;
}

div.middle {
  position: relative;
  left: 100px;
  z-index: 10;
}

div.top {
  position: absolute;
  top: 50px;
  z-index: 30;
}

div.bottom {
  position: relative;
  left: 80px;
  top: -20px;
}
Nathan Brown
Nathan Brown
229 Points
Nathan Brown
Nathan Brown
229 Points

Hi Nelson,

I think margins might be misleading you here. First, you are not able to give margin-left more than one value. You can give margin shorthand values like so: margin: -20px 0 0 80px; where the first integer is the top edge, the second is the right edge and so on clockwise.

But to solve this step they are not asking you to increase or decrease the margins but to move the position of the entire element. I think you will need CSS something like this:

.bottom {
  position: relative;
  left: 80px;
  top: -20px;
}

Nathan

Nelson Fortes
Nelson Fortes
3,145 Points
Nelson Fortes
Nelson Fortes
3,145 Points

thanks guys that one was a little tricky im not expected to remember all these little things when I become a web developer right lol