Positioning in CSS

Relative, absolute and fixed, and the containing block that anchors them.

.codewrap {
  position: relative;
}

.codewrap .timer {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 1rem;
}

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

How it works

1. An absolute box is placed against its nearest positioned ancestor.
2. inset is the shorthand for top, right, bottom and left.
3. A fixed box is placed against the viewport instead.

Keywords and builtins used here

• codewrap
• position
• rem
• timer
• toast

The run, in numbers

Lines

15

Characters to type

208

Tokens

47

Three-star pace

85 tpm

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

Type this snippet

Step 1 of 7 in Positioning, step 17 of 24 in Flexbox & grid.

← Previous Next →