Sticky headers and stacking in CSS

Sticky sits between relative and fixed; z-index orders what overlaps.

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

thead th {
  position: sticky;
  inset-block-start: 0;
  background: #0b0c10;
}

.card {
  isolation: isolate;
}

How it works

1. A sticky box needs an inset and a scrolling ancestor to stick to.
2. z-index only applies to positioned or flex and grid children.
3. isolation: isolate keeps a component's stacking to itself.

Keywords and builtins used here

• background
• blur
• card
• isolation
• position
• px

The run, in numbers

Lines

16

Characters to type

203

Tokens

48

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 34 seconds.

Type this snippet

Step 3 of 7 in Positioning, step 19 of 24 in Flexbox & grid.

← Previous Next →