CSS3: Today and Tomorrow

Goals

Review position types since CSS 2.1
Introduce position: sticky; with usecases and gotchas
Demistify z-index rules
Inspire creativity for your layouts

Vocabulary

General concepts that will be discussed

'positioned' elements - when an element has a position value assigned that is not static.
z-index - Z plane of the layout. Higher numbers mean the element appears closer to you.
box offsets - CSS properties top, right, bottom and left.
stacking order - Similar to z-index but encompasses non-positioned elements.
stacking context - An isolated context in which a stacking order is assigned.

Position's nothing new

- Static
- Relative
- Absolute
- Fixed

static

relative

absolute

fixed

`position: static;`

- defult position type

- ignores box-offsets and z-index

- follows a stacking context

- properties can interrupt stacking

.static-row (1)

.static-row (2)

.static-row (3)

Positioned Elements

values: relative, absolute, fixed and sticky

- each interprets box-offsets slightly differently

- creates a new stacking context

- z-index is always optional

- sets new stacking context

`position: relative;`

- occupies default space

- box-offsets move position
but does not move other elements

- layout properties still
impact other elements

.relative-row (1)

.relative-row (2)

.relative-row (3)

`position: absolute;`

- removed from natural flow

- does not influence layout
of parent or siblings.

- box-offsets place element with
respect to its container*.

.relative-row (1)

.absolute-row (2)

.relative-row (3)

`position: fixed;`

- removed from natural document flow

- does not influence layout
of parent or siblings.

- box-offsets place element with
respect to viewport.

.absolute-row (1)

.fixed-row (2)

.relative-row (3)

`position: sticky;`

- occupies default space

- box-offsets move define boundaries
for element to be displayed

- layout properties still
impact other elements

caniuse.com

.static-row (1)

.sticky-row (2)

.static-row (3)

.sticky-row (4)

.static-row (5)

Stacking Order and `z-index`

Determining the global stacking order of elements is simple but has very complex implications.

A simplified description:

Stacking Context's root element
Positioned elements with negative z-index values (and their children)*
Non-positioned elements (ordered by HTML)
Positioned elements with z-index: auto;
Positioned elements with a positive z-index value.

Basic Stacking Order

Determining the global stacking order of elements is simple but has very complex implications.

A simplified description:

Stacking Context's root element
Positioned elements with negative z-index values (and their children)*
Non-positioned elements (ordered by HTML)
Positioned elements with z-index: auto;
Positioned elements with a positive z-index value.

* order for flex children will assert their order over HTML order.

Setting Stacking Context

- all positioned elements with z-index
set their own stacking context.

.relative-row (1)

.relative-row (2) 😎

.static-row (3)

.static-row (4)

Setting Stacking Context Cont.

Other properties can create a new stacking context:

- opacity when set with a value < 1.

- transform

- filter

- CSS Regions

- Paged Media

- potentially others

.static-row (1)

.static-row (2) 😎

.static-row (3)

.static-row (4)

Stacking Context and z-index

photo credit

Stacking Context Playground

toggle properties/values to see how they change Stacking Context and overall presentation.

s1_1

s1_2 s1_2_1

s2_1

s2_2

Stacking Context/z-index etc

- Special drop shadow effects

- Z-index can be animated/transitioned

- Smooth z-index transition/animation

Sticky elements usecases

- simple and a11y friendly 'sticky' headers/footers

- 'fixed' headings and columns in tables

- custom scrolling effects/appearances

- javascript event liseners

CSS Position from
`top` to `bottom`.

Goals

Vocabulary

Position's nothing new

`position: static;`

Positioned Elements

`position: relative;`

`position: absolute;`

`position: fixed;`

`position: sticky;`

Stacking Order and `z-index`

Basic Stacking Order

Setting Stacking Context

Setting Stacking Context Cont.

Stacking Context and z-index

Stacking Context Playground

Stacking Context/z-index etc

Sticky elements usecases

Extras

Goals

Vocabulary

Position's nothing new

position: static;

Positioned Elements

position: relative;

position: absolute;

position: fixed;

position: sticky;

Stacking Order and z-index

Basic Stacking Order

Setting Stacking Context

Setting Stacking Context Cont.

Stacking Context and z-index

Stacking Context Playground

Stacking Context/z-index etc

Sticky elements usecases

Extras

`position: static;`

`position: relative;`

`position: absolute;`

`position: fixed;`

`position: sticky;`

Stacking Order and `z-index`