COMP 126: Practical Web Design & Development for Everyone

FLOATS

Floats & clears

overflow: auto;

This simple trick will overcome the collapsing parent element problem. overflow: hidden also works.

THE POSITION PROPERTY

• is "the normal flow of the document": that is, everything migrates to the upper left-hand corner of the page
• is the default, so you generally don't have to declare it

POSITION: STATIC;

• positions the element relative to where it would fall in the normal flow of the document, by defining "offset values"--distances from the top, bottom, left, or right of that position
• relatively positioned elements scroll normally

POSITION: RELATIVE;

• also takes offset values, but these refer to the distance from the four sides of the element's parent element, IF that parent element also has an explicitly assigned position value
• if no position value has been assigned, we simply assign position: relative; to the parent to make this work
• absolutely positioned elements scroll with their parent elements

position: absolute;

• also positions the element with offset values, but this time based on their distance from the four sides of the viewport
• fixed elements do not scroll

POSITION: FIXED;