COMP 126: Practical Web Design & Development for Everyone

THE POSITION PROPERTY

default; moves with "the normal flow of the document": that is, everything migrates to the upper left-hand corner of the page

POSITION: STATIC;

positions the element based on its distance from the sides of the viewport (the browser window), by defining "offset values"--the distances from the top, bottom, left, or right; fixed elements do not scroll

POSITION: FIXED;

Make this

positions the element relative to where it would fall in the document's normal flow, by defining "offset values"--the distances from the top, bottom, left, or right. Also required to make other elements available for absolute positioning (see next...)

POSITION: RELATIVE;

also uses offset values to position elements, but the values refer to the sides of its container element instead of the viewport or browser. For this to work, the container element also must be a positioned element; we usually just stick position: relative; on the parent. Absolutely positioned elements are thus completely outside the normal flow of the document: nothing else in the document or browser affects their positions

position: absolute;

Add these

results in a combination of relative and fixed: the sticky element stays in place until another sticky element replaces it. This one isn't often used anymore because it's weird and clunky

position: sticky;

allows you to stack/layer positioned elements

z-index

basic floats & clears

Floats & clears for layouts

THINGS TO remember ABOUT FLOATs

1. Inline elements that come after floated elements in the HTML flow around the floated elements.

2. Non-positioned block elements that come directly after floated elements in the HTML ignore the floated elements and try to flow in their usual manner (vertically), as though the floated elements did not exist (potentially leading to overlaps/collisions/collapses).

3. If you want to make a block element recognize the floated elements and behave normally toward them (not run into/overlap them) you have to "clear" the floats (left, right, or both).

collapsing parent divs

In this example, the floated (green) divs are located inside a blue parent container...but you can't see the parent, because parent containers (which are block elements) collapse when all their contents are floated. They don't recognize the floats at all.

overflow: auto;

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

Now add this