For this challenge I made 3 divs and set each to be a black square with white text. I argued this point with the designer but they could not be swayed from their painstakingly chosen color palette. I set them all to be inline-block elements so that they would sit in a nice horizontal row (and gave them a margin of 5px so they wouldn't touch), then put the second two divs in a section element set to float right, so that their ordering would be preserved. Challenge 1
I started with three divs, black background with white text, 125px x 125px. Each had its own class that referred to its div number (an id would have worked too, but could've been restrictive to further additions, if they were to happen in a hypothetical future). I left the divs as block elements so that they would each take up their own line. div1 had a default position exactly where I wanted it. I set div2 to margin: auto so that it would center on the page, and I set div3 to float right so that it would sit on the right side of the page. Challenge 2
Two square divs, a small black one to center in a bigger grey one. Divs set to margin: auto so they are centered in the page. Div 2 position: relative so that it will sit on top of Div 1, then bottom: 250px pushes Div two straight up to sit on top of Div 1 with equal spacing on all sides. Then I put both divs in a section tag with a margin-top of 30px so that it wouldn't be right at the top of the screen. Challenge 3
One black div (div1) and one grey div (div2), as before. No updates on changes to color palette. Black is in. Div1 has a fixed position so it acts as a reference for Div2, which has an absolute position, and it has top and left values of 0px, so that there is no gap between the box and the edge of the browser. Div 2 is then moved down and right with top and left settings of 90px. [Challenge 4] (http://codepen.io/juliankyer/pen/ENEeJZ)
Three square black divs, 150px by 150px. Div1 is position: fixed so that it positions itself according to the browser window, and has top and right values of 0 to jam it up in the upper right corner. Div2 and Div3 have positions of relative so they stay in the normal flow of the page. They both have top: 140px settings that line their top edges up with the next highest div's bottom edge (140 instead of 150 because of the bump upwards div1 had, so it references div1's original position). Div2 has margin auto to center it in the page, and div3 naturally sits on the left. Challenge 5
A big grey rectangle (div1), and two black squares (div2 and div3). Div1 has position: fixed so that it doesn't stay in normal flow, and can be pushed flush into the lower right corner with top: 0 and bottom: 0. I'm unclear on how absolute vs fixed positioning here affects the div2 and div3 elements; both put them in the right place for this scenario, but I gather that if they had ancestors that would change things. They are both positioned here in reference to the bottom right corner. Challenge 6
Div1 (large grey square) has position: fixed with top: 0px and left: 0px so that it positions itself relative to the viewport, and is pushed flush in the upper right corner. Div2 (small black square) has a position: absolute with top: 150px and left: 150px, so that it can be pushed flush into the lower right corner of Div1. Challenge 7
I started realizing I was getting a one-track mind on these answers and probably was missing some things. For this one, I nested div2 inside div1, and set div1 position: relative. Then I set div2 to position: absolute; this let me use div1 as the reference point for div2. So on div2, top: 0px right: 0px puts the black box 0px from the top-right corner of div1. Challenge 8