COMP 126: Practical Web Design & Development for Everyone

POSITIONING & FLOATs

FLOATS

Floats & clears

overflow: auto;

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

position: static;
          relative;
          absolute;
          fixed;

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;