Positioning

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

CSS Position Properties static relative absolute fixed inherit

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

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

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

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

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

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.

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.

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!

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

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

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!

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.

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;

  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.

  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.