Chapter 19: CSS Layout

19.1 CSS Position

static (default)

Static 1
Static 2
Static 3

relative

Normal
Relative

absolute

Parent (relative)
Absolute

fixed

Scroll to see the fixed element.

Fixed

sticky

Sticky

19.2 CSS Float

float left / right

Left
Right

Lorem ipsum dolor sit amet...

clear property

Left
Right

This paragraph clears both floats.

19.3 CSS Z-index

z=1
z=2
z=3

19.4 CSS Flexbox

Basic Flex

Item 1
Item 2
Item 3

justify-content

1
2
3

align-items

1
2
3

19.5 CSS Grid

Basic Grid

1
2
3
4
5
6

Grid Areas

Header
Sidebar
Main
Footer

19.6 CSS Alignment

Horizontal

Centered
Auto Margin

Vertical

Flex Center
Absolute Center

Perfect Centering

Perfect Center