So stapeln Sie Elemente in CSS

Wenn Sie fantastische und einzigartige visuelle Erlebnisse im Web erstellen möchten, benötigen Sie irgendwann zwei Elemente, um sich überlappen oder am selben Ort existieren. Möglicherweise müssen sie nur in der Nähe oder nebeneinander positioniert werden. Lassen Sie uns zwei verschiedene Möglichkeiten durchgehen, dies zu erreichen, eine mit der Positionseigenschaft und eines mit CSS -Gitter.

Methode 1: Verwenden der Positionseigenschaft

Möglicherweise kennen Sie diese Position bereits: absolut; wird etwas absolut auf die Seite legen, wo immer Sie es möchten. In diesem Fall positionieren wir das Kind absolut zum oberen Links der Seite. Egal wo der Elternteil ist, das Kind wird absolut in diese Ecke platziert.

 .Kind {
  ...
  Position: absolut;
  Top: 0;
  links: 0;
} 

Siehe den Stift
CSS -Stapel, Absolute 1 von Sarah Drasner (@Sdras)
auf Codepen.

Aber das ist sehr spröde! Was wäre, wenn Sie etwas auf die Seite platzieren und dann etwas anderes nach ihr kommt? Vielleicht haben Sie ein Symbol in einer Navigation, die Sie immer in der oberen linken Ecke haben möchten, aber ein Dritter kommt herein und legt eine Banner-Anzeige ein. (Ich setze mich nicht für Banner -Anzeigen ein, aber sie existieren.) Dies drückt die Navigation nach unten und jetzt ist die Ikone fehl am Platz.

Oder nehmen wir an, Sie möchten eine in sich geschlossene Komponente erstellen, die Sie an mehreren Stellen verwenden können. Sie müssen wiederverwendbar sein und in seinem eigenen Kontext arbeiten, egal wo Sie es verwenden.

Wenn wir Position setzen: Relativ; Auf dem übergeordneten Element alles in der Position: Absolut; wird absolut platziert, relativ zu dieser enthaltenden Einheit!

 .Kind {
  / * ... */
  Position: absolut;
  Top: 0;
  links: 0;
}

.PARENT {
  Position: Relativ;
} 

Siehe den Stift
CSS -Stapel, Absolute 2 von Sarah Drasner (@Sdras)
auf Codepen.

Hübsch.

Wir können die gleiche Prämisse verwenden, wenn wir zwei Elemente übereinander stapeln wollten. Hier haben wir zwei Kinderelemente aufeinander gestapelt und mit 150 Pixel auseinandergesetzt. Wir werden sehen, dass sie jetzt in demselben Elternteil enthalten sind und darin positioniert bleiben.

Elternteil

Kind 1

Kind 2

 .Kind {
  Position: absolut;
  Top: 0;
}

.Child-1 {
  links: 0;
}

.Child-2 {
  links: 150px;
}

.PARENT {
  Position: Relativ;
} 

Siehe den Stift
CSS Stacking, Absolute 3 von Sarah Drasner (@Sdras)
auf Codepen.

Dies ist eine kleine alte Schule, aber ich benutze sie seit Jahren und ich greife immer noch danach. Es funktioniert konsequent über Browser und kann Ihnen helfen, selbst die seltsamsten und einzigartigen Platzierungen zu erreichen.

Methode 2: Verwenden von CSS -Raster

Eine weitere schöne Möglichkeit, Elemente zu überlappen, sie zu stapeln oder deren Platzierung zu ändern, ist das CSS -Netz, je nachdem, wie weit Sie es unterstützen müssen (was Sie bei Caniuse erkundigen können).

Wir können etwas dort platzieren, wo wir es in den Behälter wie diesen brauchen:

 .PARENT {
  Anzeige: Grid;
  Grid-Template-Säulen: 250px 1fr;
  Grid-Template-Reihen: 150px 1fr;
}

.Kind {
  Gitterfläche: 1 / 1/2/2;
} 

Siehe den Stift
CSS Stacking, Grid 1 von Sarah Drasner (@Sdras)
auf Codepen.

Und wenn ein Element auf dem anderen stapeln sollte, können wir sie genau in den gleichen Gitterbereich setzen. Lassen Sie sie sie auch mit einem Rand leicht ausgleichen.

 .PARENT {
  Anzeige: Grid;
  Grid-Template-Säulen: 250px 1fr;
  Grid-Template-Reihen: 150px 1fr;
}

.Kind {
  Gitterfläche: 1 / 1/2/2;
}

.Child-2 {
  Rand-Links: 200px;
} 

Siehe den Stift
CSS Stacking, Grid 2 von Sarah Drasner (@Sdras)
auf Codepen.

Wenn Sie diese Technik schwer zu visualisieren finden, habe ich einen CSS -Gittergenerator erstellt, der hoffentlich die Dinge klarer sieht.

Es gibt so viele Orte, um diese Techniken anzuwenden! Sie können Elemente stapeln, schichten und versetzen. Sie können Navigationen, Fußzeilen machen. Sie können fast jede Art von Layout erstellen, in der Sie mehr feinkörnige Kontrolle darüber haben möchten, wie Elemente auf einer Seite platziert werden.

Das obige ist der detaillierte Inhalt vonSo stapeln Sie Elemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!