1. Positioning

2. Positioning Elements have position value of static by default
TOP
Elements have position value of static by default
Using a value other than static makes it a positioned element
May use: top, left, bottom, & right properties to control placement
ELEMENT
LEFT
RIGHT
BOTTOM

3. CSS Position Properties
static
relative
absolute
fixed
inherit

4. S T A I C
div‘s are block elements – automatically fall on next line from element above them

5. Relative positioning Renders in normal page flow
Then shifts via left, right, top, and bottom relative to that original position

6. 200px from where its left would have been
Acts like static, but power to offset with top, right, bottom, and left
100 px
200px from where its left would have been

7. R E L A T I V
Child elements get coordinate system relative to parent’s position
200 px
100px
If we move box2 inside box1, then it will offset 200px from the left of box1

8. Absolute Positioning Removes element from normal page flow
Positions via left, right, top, and bottom based on edges of viewport
Viewport = what you can see in browser

9. A B S O L U T E
Element removed from normal flow. Put anywhere, won’t affect flow.
Acts like it has a strip of velcro on it. You position it wherever and it sticks there.

10. A B S O L U T E
Can use top, bottom, left & right to stretch across page without width.
Acts like it has a strip of velcro on it. You position it wherever and it sticks there.

11. Absolute
Child elements will get new coordinate system relative to parent’s position just like with relative positioning.
BE CAREFUL: If user has changed resolution or resized their window, your absolutely positioned elements may not show at all or may be on top of or underneath other content you don’t intend!

12. Fixed Positioning
Affixes element to specific place in window, where it will stay regardless of scrolling

13. F I X E D
Acts like absolute positioned…EXCEPT it doesn’t move when scrolled.

14. Fixed
BE CAREFUL: If user has changed resolution or resized their window, your fixed positioned elements may not show at all or may be on top of or underneath other content you don’t intend!

15. Z-iNDEX
control where element appears in the depth of field (front to back)
By default, elements added later in the html have higher z-index (are closer to you and will sit on top of other elements when they occupy the same space).
You can set values specifically. Higher numbers stacked on TOP of lower numbers.

16. Z-iNDEX
Ex: box1 will sit on top of box2 if the two occupy same space on page.
#box1{
z-index: 2; }
#box2{
z-index: 1;

17. static
relative
absolute
fixed
1. Default value for all HTML elements
2. Elements will stack vertically on top of one another like blocks.
3. Elements can be shifted using left, right, top, and bottom properties.
4. Width & height properties can be set for elements.
5. Defines new coordinate system for child elements.
6. Pulls element out of normal flow.
7. Will not "interact" with other elements at all (be shifted by or shift them).
8. Scrolls with the document.

18. static
relative
absolute
fixed
1. Default value for all HTML elements X
2. Elements will stack vertically on top of one another like blocks.
3. Elements can be shifted using left, right, top, and bottom properties.
4. Width & height properties can be set for elements.  X X 
5. Defines new coordinate system for child elements.
6. Pulls element out of normal flow.
7. Will not "interact" with other elements at all (be shifted by or shift them).
8. Scrolls with the document.