CSS-Position-Challenge

gistfile1.txt

##### Challenge 1

Approach: A container positioned relative is used to hold all boxes.  Each box is displayed inline-block, positioned absolute, and placed where it belongs within the container, using the top, right, and left positionals.

[Challenge 1] (http://codepen.io/maiastone/pen/xOokBq)

___

##### Challenge 2

Approach: A container positioned relative holds all boxes.  Each box is displayed block, and positioned absolute, and placed where it belongs within the container, using left 0 to push left, 50% to center, and right 0 to push right, and dropping each 100px from the top.

[Challenge 2] (http://codepen.io/maiastone/pen/kXKbNb)

___

##### Challenge 3

Approach: The smaller box is nested within the bigger box.  Each is positioned with margin auto to center.  The smaller box also contains a top margin of 25px to push it into the center of the bigger box.

[Challenge 3] (http://codepen.io/maiastone/pen/mEkEdd)

___

##### Challenge 4
 
Approach: The gray box is nested inside the black box of the same size.  Margin left and top are used to push the gray into the right place.  A margin of -8px is used to push the black box all the way into the corner, removing the auto margin.

[Challenge 4] (http://codepen.io/maiastone/pen/akgkvR)

___

##### Challenge 5

Approach: A container with 100% width, and position relative, holds 3 boxes.  Each box is positioned absolute, and pushed to the all the way to the left, 50%, and all the way to the right, respectively.  Box 2 and 3 are each positioned 100px (the width of the box) down from box 1.

[Challenge 5] (http://codepen.io/maiastone/pen/xOoOjo)

___

##### Challenge 6

Approach: A container positioned fixed into the bottom right corner, is used to hold two nested boxes with absolute positions in each corner.

[Challenge 6] (http://codepen.io/maiastone/pen/OXKEXB)

___

##### Challenge 7

Approach: The smaller box, positioned absolutely in the bottom right corner, is nested within the bigger box, which is positioned relative, to contain the smaller box.

[Challenge 7] (http://codepen.io/maiastone/pen/qNZYZq)

___

##### Challenge 8

Approach:The smaller box, positioned absolutely in the top right corner, is nested within the bigger box, which is positioned relative, to contain the smaller box.

[Challenge 8] (http://codepen.io/maiastone/pen/KrOZEz)

___

##### Challenge 9

Approach: A container positioned relative, and with auto height and width is used to hold all three boxes.  The auto is determined by the size of box 1.  Boxes 2 and 3 are then positioned absolutely within the container, and therefore, box 1.  They are both 50px from the left, but one is 0 from top, and the other, 0 from bottom. 

[Challenge 9] (http://codepen.io/maiastone/pen/QEZxoj)

___

##### Challenge 10

Approach: A container holding all the boxes is positioned relative, in order to position the boxes within, and set to display inline-block.  Each box is set to size, and positioned absolute.  Each small box is positioned with coordinates to place them inside the container, and box 1.  

[Challenge 10] (http://codepen.io/maiastone/pen/kXOpPY)

___

##### Challenge 11

Approach: A container holding all the boxes is positioned relative, in order to position the boxes within.  The height and width of the container is set, and the big box is set to 100%, to fill the container.  The smaller boxes are positioned absolute, and so able to be set from the bottom right corner.

[Challenge 11] (http://codepen.io/maiastone/pen/bZXKgk)

___

##### Challenge 12

Approach: A container holding all the boxes is positioned relative, in order to position the boxes within.  The height and width of the container is set, and the big box is set to 100%, to fill the container.  The smaller boxes are positioned absolute, and so able to be set from the bottom right corner.  A position using a negative in front, pushes the smaller boxes outside the container and the big box.
 
[Challenge 12] (http://codepen.io/maiastone/pen/bZXKRJ)

___

##### Challenge 13

Approach: Each of 5 boxes is nested within the box on top of it.  Then, each box is moved over and to the right, using margin-left and margin-top.  

[Challenge 13] (http://codepen.io/maiastone/pen/dXxKaj)

___

##### Challenge 14

Approach: A smaller box is nested within the bigger box, and they are both held in a container.  The container is set to 100%, which is defined by the bigger box.  The container is holding the position relative, so the boxes can be set to absolute.  The big box is pushed all the way to the right, and the small box is pushed to the left and bottom of the big box.

[Challenge 14] (http://codepen.io/maiastone/pen/wWVXOw)

___

##### Challenge 15

Approach: Each box is set position absolute, within a container with a relative position.  The size of the container is set to hold all 4 boxes.  Each box is positioned absolute, and set to the left, right, top and bottom corners.

[Challenge 15] (http://codepen.io/maiastone/pen/BzXVrX)