For this challenge I used floats to position the divs. Since the div 3 was before div2 in the comp, I had to switch their order in HTML to make them float correctlhy.
For this challenge I used position: relative since all of the divs were position in relation to the first. Since their bottoms were lined up with the tops of the next dive in the comp, I just moved the second and third div to the right. I moved the second div 175 pixels to the right and I doubled that for the third div.
For this challenge, I put the second div inside the first and then gave the second div a higher index so it would come to the front. I used position: relative to center the second div inside the first. I had some challenges with the margins, so I also set the body margins and padding to 0 so the user stylesheet wouldn't override mine.
I again used position relative for this challenge. In order to let the boxes stack on top of one another I had to give them an inline-block attribute. Then I took the second div and moved it down from the top and used a negative left number to pull it on top of the first div. The second div also had a higher z-index so it would go on top.
This challenge was tricky. To make it work I first made a div to contain all of the divs and gave it a position relative -- this was because I wanted the first div to have an absolute position and to do that it's parent container has to have relative positioning. Once I did that, I was able to make the first div absolute in the container div and the send and third divs were made in relative positining with the first absolute div. I also set the margin and padding to 0 so the divs would go to the end of the screen.
For this challenge I used a combination of the position relative and floats. First I set my larger div1 to contain both div 2 and div3 and gave div2 and div3 higher z-index numbers to come out on top. Then I moved the first box down and floated to the right - bringing the smaller divs with. The third div I just floated to the right. The second div I moved down with position relative and floated to the left.
This challenge was similar to the last - the larger div1 contained div2. For this challenge, div1 did not need any positioning. Div2 was moved with position relative down and then floated to the right. Challenge 7
Using the same strategy from the last two, I simply removed the "position-relative" property from the second div. It moved to the top and kept its float to the right. Challenge 8
For this challenge, I kept the same basic CSS as the last challenge, but instead of floating div 2 to the right, I changed the position relative to center the div. I tried to center it using margin: 0 auto, but that was not working out for some reason. For div3, I again used position relative to position it in the center bottom of div1. Challenge 9