Wie man Elemente in CSS überlappt

Wenn Sie fantastische und einzigartige visuelle Erlebnisse im Web erstellen möchten, benötigen Sie irgendwann zwei Elemente, die sich überlappen oder am selben Ort befinden. Möglicherweise müssen Sie sie auch nur nahe beieinander oder nebeneinander positionieren. Gehen wir zwei verschiedene Möglichkeiten durch, dies zu erreichen: eine mit der `position`-Eigenschaft und eine mit CSS Grid.

Methode 1: Verwenden der `position`-Eigenschaft

Sie wissen vielleicht bereits, dass `position: absolute;` etwas absolut auf der Seite platziert, wo immer Sie möchten. In diesem Fall positionieren wir das Kind absolut oben links auf der Seite. Egal wo sich das übergeordnete Element befindet, das Kind wird absolut in dieser Ecke platziert.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

Siehe den Pen
CSS Stacking, Absolute 1 von Sarah Drasner (@sdras)
auf CodePen.

Aber das ist sehr fehleranfällig! Was passiert, wenn Sie etwas auf der Seite platzieren und dann etwas anderes dazukommt? Vielleicht haben Sie ein Symbol in einer Navigation, das Sie immer in der oberen linken Ecke haben möchten, aber ein Drittanbieter fügt eine Banneranzeige ein. (Ich befürworte keine Banneranzeigen, aber sie existieren.) Dies verschiebt die Navigation nach unten und nun ist das Symbol aus der Position.

Oder nehmen wir an, Sie möchten eine in sich geschlossene Komponente erstellen, die Sie an mehreren Stellen verwenden können. Sie muss wiederverwendbar sein und in ihrem eigenen Kontext funktionieren, egal wo Sie sie verwenden.

Wenn wir `position: relative;` auf das übergeordnete Element setzen, wird alles darin mit `position: absolute;` absolut relativ zu dieser enthaltenden Einheit platziert!

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

Siehe den Pen
CSS Stacking, Absolute 2 von Sarah Drasner (@sdras)
auf CodePen.

Schön.

Wir können diesen gleichen Ansatz verwenden, wenn wir zwei Elemente übereinander stapeln möchten. Hier haben wir zwei untergeordnete Elemente, die übereinander gestapelt sind und 150 Pixel voneinander entfernt sind. Wir werden sehen, dass sie nun in diesem selben übergeordneten Element enthalten sind und darin positioniert bleiben.

.child {
  position: absolute;
  top: 0;
}

.child-1 {
  left: 0;
}

.child-2 {
  left: 150px;
}

.parent {
  position: relative;
}

Siehe den Pen
CSS Stacking, Absolute 3 von Sarah Drasner (@sdras)
auf CodePen.

Das ist ein bisschen old school, aber ich benutze es seit Jahren und greife immer noch darauf zurück. Es funktioniert konsistent über verschiedene Browser hinweg und kann Ihnen helfen, selbst die seltsamsten und einzigartigsten Platzierungen zu erreichen.

Methode 2: Verwenden von CSS Grid

Eine weitere nette Möglichkeit, Elemente zu überlappen, zu stapeln oder ihre Platzierung zu ändern, ist CSS Grid, je nachdem, wie weit Sie zurückkompatibel sein müssen (was Sie mit caniuse prüfen können).

Wir können etwas dort platzieren, wo wir es im Container benötigen, so:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

Siehe den Pen
CSS Stacking, Grid 1 von Sarah Drasner (@sdras)
auf CodePen.

Und wenn ein Element über dem anderen gestapelt werden soll, können wir es in denselben Grid-Bereich legen. Lassen Sie uns sie auch leicht versetzt mit einem `margin` versehen.

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

.child-2 {
  margin-left: 200px;
}

Siehe den Pen
CSS Stacking, Grid 2 von Sarah Drasner (@sdras)
auf CodePen.

Wenn Sie diese Technik schwer visualisieren können, habe ich einen CSS Grid Generator erstellt, der hoffentlich hilft, die Dinge klarer zu sehen.

---

Es gibt so viele Einsatzmöglichkeiten für diese Techniken! Sie können Elemente stapeln, überlagern und versetzen. Sie können Navigationen und Footer erstellen. Sie können fast jede Art von Layout erstellen, bei dem Sie eine feinere Kontrolle darüber haben möchten, wie Elemente auf einer Seite platziert werden.