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

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.

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

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;
}

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

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