A Utility Class for Covering Elements

A Utility Class for Covering Elements

Michelle Barker highlights a recurring CSS pattern: completely covering one element with another. The approach is consistent — the element underneath gets position: relative, and the covering element gets position: absolute, with all four sides aligned to the edges of the first.

.original-element {
  position: relative;
}

.covering-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

There’s a lingering habit of avoiding bottom and right, preferring instead to set top and left and then apply width: 100% and height: 100%. The reasoning feels dated — likely tied to older browser quirks — but the pattern persists.

.overlay {
  position: absolute;
  inset: 0;
}

The inset property, a logical property, is notably handy for this exact use case. Barker’s article also covers another trick using CSS Grid.