Lesson 6 Project

static

Default flow positioning.

position: static;

relative

Positioned relative to itself.

position: relative;

fixed

Stays in place relative to viewport.

position: fixed;

absolute

Positioned relative to nearest ancestor.

position: absolute;

sticky

Switches between relative and fixed.

position: sticky;

border-box

Includes padding + border in width/height.

box-sizing: border-box;

margin

Space outside the border.

margin: 20px;

border

Line around padding + content.

border: 15px solid red;

padding

Space around content inside border.

padding: 50px;