Leichteres Positionieren mit CSS

Wollten wir ein Element über die gesamte Seite ausdehnen und absolut positionieren, mussten wir bisher immer alle vier Himmelsrichtungen angeben. Das sah dann so aus:

.test-1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Mittlerweile geht das auch wesentlich kürzer:

.test-2 {
  position: absolute;
  inset: 0;
}

inset ist ein Shorthand-Ausdruck und funktioniert analog zu margin. Deshalb können wir auch gemischte Angaben machen:

.test-3 {
  position: fixed;
  inset: 50px 0 0 20%;
}