Sticky, fixed and the containing block in CSS

Where an absolute element lands depends entirely on which ancestor is positioned.

.panel { position: relative; }

.panel .close {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
}

.table-head th {
  position: sticky;
  inset-block-start: 0;
  background: white;
  z-index: 2;
}

.toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
}

How it works

1. position: absolute measures from the nearest positioned ancestor.
2. fixed measures from the viewport — unless an ancestor has a transform.
3. sticky needs a threshold and a scrolling ancestor with room to move.

Keywords and builtins used here

• background
• close
• panel
• position
• rem
• toast

The run, in numbers

Lines

20

Characters to type

289

Tokens

67

Three-star pace

85 tpm

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

Type this snippet

Step 2 of 7 in Positioning, step 18 of 24 in Flexbox & grid.

← Previous Next →