Weniger absolute Positionierung mit modernem CSS

Ahmad Shadeed bloggt die Meinung, dass wir uns möglicherweise nicht mehr so stark auf position: absolute verlassen müssen wie früher. Zum einen: das Stapeln von Elementen. Wenn Sie zum Beispiel einen Stapel von Elementen haben, die alle übereinander liegen sollen…

.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / -1;
}

Alle Elemente belegen zu diesem Zeitpunkt dieselbe Grid-Zelle, aber Sie können immer noch Ausrichtung und Begründung verwenden, um Dinge zu verschieben und sie so aussehen und sich verhalten zu lassen, wie Sie es möchten.

Was Sie mit position: absolute wirklich sagen, ist Ich möchte, dass dieses Element vollständig aus dem Fluss genommen wird, so dass es andere Elemente nicht beeinflusst und andere Elemente es nicht beeinflussen. Manchmal tun Sie das, aber wohl seltener, als es Ihre bestehende CSS-Muskelgedächtnis Sie glauben lassen würde.

Ich schnappe mir hier eine von Ahmads Ideen

Sowohl das Tag als auch der Titel sind so positioniert, dass wir vielleicht automatisch an absolute Positionierung denken würden. Aber auch hier hat etwas wie CSS Grid alle Ausrichtungsfunktionen, die wir brauchen, um sie nicht nur vertikal zu stapeln, sondern sie genau dort zu platzieren, wo wir sie haben wollen.

Direkter Link →