For the first one I used the float right and left to get them positioned. I first ried the float left and then right on the other two elements, but that didnt work well. So put all elements in the display of inline block. and put margin-right to push the other two on the right. challenge 1
For the second Challenge I used the margin-left to push them over. Set all the elements to block. challenge 2
For the third challegne I used the z-index and I created a nested div. and used margin 0 and margin auto challenge 3
For the 4th one I used the z-index and the position relaitve to get the boxes to overlap. challenge 4
I used the margin-left to move the boxes over in a diagonal line. While putting the display in block so they all sat on their own line. challenge 5
It was hard to get all the divs to behave correctly. I had div1 set at -10 and div2 and div 3 at 0. Then I experimented with the margins to position them. I also had to keep all 3 elements in display: block. challenge 6
For challemge 7 I used the same technique of the z-index on div 1, and gave a display of block, position of relative, and and margin-top of -100px and margin-left of 100px. challenge 7
Challenge 8 I used the exact same code as challenge instead I changed the margin-top to -250px. challenge 8
Similar to challenge 8. I created a third div and gave it the same properites as div 2. I hope I'm not beating a dead horse with the z-index, but it seems to work the best. Div 2 had -400px for the top margin while Div 3 had 200px top-margin. With both having a margin-left of 20px. challenge 9
Challenge 10 was a bit harder than the last two. I changed the z-index to about for all three divs and then used the margin-left and margin-top to get them positioned into div 1. challenge 10
Challenge 11 took me the whole of the warm up time. I had to research MDN and see how different values on the z-index affected different elements. For div one had a postion of absolute and z-index -10 since I wanted it on the bottom level. Div 2 had pposition of absolute and a z-index of -5 since it would be in the middle. Last was div 3 with position of absolute and z-index of 0 since it would be on top. challenge 11
I did the exact same thing for challenge 11 excapt just tweaked with the margins to get them in position. challenge 12
After doing more research on what exaclty the z-index is I had to give -10 to div 1. Then go -5, -3, 0 , 3, 5. So that they would stake on each other. Then I kept the margin top the same on all the divs, and only changed the margin-left to push them over. challenge 13
Challenge 14 was very similar to challenge 8. I used very similar properties but shifted the elements to the right. So I set both elements to margiin-left to 750px. challegne 14
Currently challenge 15 is a work in progress. Maybe we could look at it in in class? I have inline-block on the first two elements. Block on the third element. challenge 15