css mit Adi Prinz

display: none

Mit display: none wird ein Element vollständig aus der Darstellung entfernt. Es belegt keinen Platz mehr im Layout und wird normalerweise auch nicht in den Accessibility Tree aufgenommen.

.hidden {
  display: none;
}

<p class="hidden">
  Dieser Absatz wird nicht dargestellt.
</p>

Soll ein Element nur optisch verborgen, aber beispielsweise für Screenreader verfügbar bleiben, ist eine speziell dafür vorgesehene Hilfsklasse erforderlich.

display: block

Ein Blockelement beginnt normalerweise in einer neuen Zeile und nimmt ohne festgelegte Breite den verfügbaren Platz seines Elternelements ein.

span.box {
  display: block;
  padding: 1rem;
  background-color: lightblue;
}

In diesem Beispiel erhält das <span>-Element das Darstellungsverhalten einer Blockbox.

display: inline

Inline-Elemente werden innerhalb einer Textzeile dargestellt. Sie beginnen nicht automatisch in einer neuen Zeile.

div.example {
  display: inline;
}

Bei Inline-Elementen wirken horizontale Werte für padding und margin wie erwartet. Vertikale Außenabstände verändern den Abstand zwischen den Textzeilen jedoch nicht.

Die Eigenschaften width und height bestimmen bei gewöhnlichen Inline-Elementen nicht die Größe der Inlinebox.

display: inline-block

Ein Element mit display: inline-block steht wie ein Inline-Element innerhalb einer Zeile. Gleichzeitig kann es mit width, height, padding, border und margin wie eine Blockbox gestaltet werden.

.box {
  display: inline-block;
  width: 150px;
  min-height: 75px;
  margin: 10px;
  padding: 10px;
  border: 1px solid red;
}

Abstände zwischen Inline-Block-Elementen

Leerzeichen und Zeilenumbrüche zwischen Inline-Block-Elementen werden wie gewöhnliche Textleerzeichen behandelt. Dadurch entsteht zwischen den Elementen ein kleiner Abstand.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

Dieser Abstand ist kein CSS-Fehler. Für moderne Komponentenlayouts sind Flexbox oder Grid meistens besser geeignet. Dort kann der gewünschte Abstand gezielt mit gap festgelegt werden.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

display: list-item

Mit display: list-item erhält ein Element das Darstellungsverhalten eines Listeneintrags. Es kann dadurch einen Listenmarker erzeugen.

span.list-entry {
  display: list-item;
  margin-left: 2rem;
  list-style-type: square;
}

Für echte Listen sollten aus semantischen Gründen trotzdem <ul>, <ol> und <li> verwendet werden.

display: flow-root

Mit display: flow-root erzeugt ein Element einen neuen Block Formatting Context. Dadurch kann das Element unter anderem enthaltene Float-Elemente vollständig umschließen.

.container {
  display: flow-root;
  padding: 1rem;
  border: 1px solid #777;
}

.container img {
  float: left;
  margin-right: 1rem;
}

flow-root ist heute eine saubere Möglichkeit für einen sogenannten Clearfix. Es ist dafür besser geeignet als ein zweckentfremdetes overflow: auto.

Flexbox und Grid aktivieren

Mit display: flex oder display: grid wird ein Element zum Layoutcontainer. Seine direkten Kindelemente werden dadurch zu Flex- oder Grid-Items.

.flex-container {
  display: flex;
  gap: 1rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Flexbox eignet sich besonders für eindimensionale Layouts entlang einer Hauptachse. Grid eignet sich besonders für zweidimensionale Layouts mit Zeilen und Spalten. Beide Layoutmodelle werden in eigenen Kapiteln ausführlich behandelt.

Display-Werte für Tabellen

Werte wie table, table-row, table-cell und table-caption erzeugen das Darstellungsverhalten von Tabellenelementen.

Diese Werte werden im Kapitel „Tabellen und display“ behandelt. Für echte tabellarische Daten sollten weiterhin die semantischen HTML-Tabellenelemente verwendet werden.

display: contents

Mit display: contents erzeugt das Element selbst grundsätzlich keine eigene Box. Seine Kindelemente werden so in das Layout einbezogen, als wären sie direkte Kinder des übergeordneten Elements.

.wrapper {
  display: contents;
}

Der Wert kann beispielsweise bei Grid- und Flexbox-Layouts nützlich sein. Er sollte jedoch vorsichtig eingesetzt werden, weil die Auswirkungen auf Semantik, Barrierefreiheit und bestimmte Browserfunktionen geprüft werden müssen.

float

Mit float: left wird ein Element an der linken Seite seines Containers angeordnet. Nachfolgender Text fließt auf der rechten Seite um das Element herum. Bei float: right geschieht dies spiegelverkehrt.

.article-image {
  float: left;
  width: 280px;
  height: auto;
  margin: 0 1rem 0.5rem 0;
}

<article>
  <img
    class="article-image"
    src="images/garten.jpg"
    alt="Blühender Garten mit einem kleinen Teich"
    width="800"
    height="600"
  >

  <p>
    Dieser Text fließt rechts um das Bild herum. Sobald unterhalb des Bildes
    wieder genügend Platz vorhanden ist, verwendet der Text die gesamte Breite.
  </p>
</article>

Wichtige Werte für float

• none: Das Element wird nicht als Float positioniert. Dies ist der Standardwert.
• left: Das Element wird links positioniert.
• right: Das Element wird rechts positioniert.
• inline-start: Das Element wird am Anfang der Schreibrichtung positioniert.
• inline-end: Das Element wird am Ende der Schreibrichtung positioniert.

Die logischen Werte inline-start und inline-end berücksichtigen die Schreibrichtung des Dokuments.

Float-Elemente im Container umschließen

Ein Float-Element wird teilweise aus dem normalen Dokumentfluss genommen. Enthält ein Container ausschließlich Float-Elemente, kann seine automatisch berechnete Höhe deshalb zusammenfallen.

Eine moderne Lösung ist display: flow-root am Elternelement.

.float-container {
  display: flow-root;
  padding: 1rem;
  border: 1px solid #777;
}

.float-container img {
  float: left;
  margin-right: 1rem;
}

Früher wurde dafür häufig ein sogenannter Clearfix oder overflow: auto eingesetzt. flow-root beschreibt den gewünschten Zweck heute direkter und verursacht keinen unbeabsichtigten Scrollbereich.

clear

Mit clear wird festgelegt, dass ein Element nicht neben bestimmten vorhergehenden Float-Elementen stehen darf.

.next-section {
  clear: both;
}

Wichtige Werte für clear

• none: Float-Elemente werden nicht berücksichtigt. Dies ist der Standardwert.
• left: Das Element wird unter vorhergehenden links ausgerichteten Float-Elementen angeordnet.
• right: Das Element wird unter vorhergehenden rechts ausgerichteten Float-Elementen angeordnet.
• both: Das Element wird unter links und rechts ausgerichteten Float-Elementen angeordnet.
• inline-start und inline-end: Logische Werte, die die Schreibrichtung berücksichtigen.

Float nicht für vollständige Seitenlayouts

Mehrspaltige Seitenlayouts wurden früher häufig mit mehreren Float-Elementen, Prozentbreiten und sorgfältig berechneten Außenabständen aufgebaut. Diese Methode ist fehleranfällig und nur schwer responsiv zu gestalten.

Für nebeneinanderstehende Boxen sollte heute Flexbox oder Grid verwendet werden.

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

position: static

static ist der Standardwert. Das Element bleibt im normalen Dokumentfluss. Die Eigenschaften top, right, bottom, left und z-index haben bei einem gewöhnlichen statisch positionierten Element keine positionierende Wirkung.

.box {
  position: static;
}

Top, Right, Bottom, Left und Inset

Die Eigenschaften top, right, bottom und left bestimmen die Abstände eines positionierten Elements zu seinen Bezugskanten.

.box {
  position: absolute;
  top: 20px;
  right: 20px;
}

Mit inset können alle vier Werte in einer Kurzschreibweise notiert werden. Die Reihenfolge entspricht top, right, bottom und left.

.box {
  position: absolute;
  inset: 20px 30px 40px 50px;
}

Mit inset: 0 wird ein absolut positioniertes Element an allen vier Kanten seines Bezugselements ausgerichtet.

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

position: relative

Ein relativ positioniertes Element bleibt im normalen Dokumentfluss. Es kann ausgehend von seiner ursprünglichen Position verschoben werden. Der ursprünglich reservierte Platz bleibt dabei erhalten.

.box {
  position: relative;
  top: 10px;
  left: 10px;
}

position: relative wird außerdem häufig ohne Verschiebung verwendet, um ein Bezugselement für absolut positionierte Nachkommen zu erzeugen.

position: absolute

Ein absolut positioniertes Element wird aus dem normalen Dokumentfluss genommen. Andere Elemente verhalten sich daher grundsätzlich so, als würde es dort keinen Platz belegen.

Als Bezug dient normalerweise der nächste Vorfahre, der einen anderen position-Wert als static besitzt. Gibt es keinen solchen Vorfahren, richtet sich das Element am sogenannten Initial Containing Block aus.

.card {
  position: relative;
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

<article class="card">
  <span class="card-badge">Neu</span>
  <h3>Excel-Grundlagen</h3>
  <p>Formeln und Zellbezüge verständlich erklärt.</p>
</article>

Elemente innerhalb eines Containers positionieren

.image-container {
  position: relative;
  width: min(100%, 900px);
  min-height: 355px;
  margin-inline: auto;
  border: 1px solid green;
}

.image-left,
.image-right {
  position: absolute;
  top: 20px;
  width: calc(50% - 30px);
}

.image-left {
  left: 20px;
}

.image-right {
  right: 20px;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

Für ein gewöhnliches responsives Layout mit zwei Bildern wäre Grid oder Flexbox einfacher. Absolute Positionierung ist besonders sinnvoll, wenn Elemente gezielt überlagert oder an einer bestimmten Stelle innerhalb einer Komponente befestigt werden sollen.

position: fixed

Ein Element mit position: fixed wird aus dem normalen Dokumentfluss genommen. Es bleibt beim Scrollen normalerweise an derselben Stelle im Viewport.

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 0.75rem 1rem;
}

Bestimmte Eigenschaften eines Vorfahren, beispielsweise manche transform- oder filter-Werte, können einen anderen Bezugskontext für ein fixiertes Element erzeugen.

Fixierte Elemente dürfen wichtige Inhalte nicht verdecken. Das ist besonders auf kleinen Bildschirmen und bei starker Seitenvergrößerung zu prüfen.

position: sticky

Ein Sticky-Element verhält sich zunächst wie ein Element im normalen Dokumentfluss. Beim Scrollen bleibt es innerhalb seines Scrollcontainers an einer festgelegten Grenze haften.

.scroll-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #777;
}

.sticky-heading {
  position: sticky;
  top: 0;
  padding: 1rem;
  background-color: lightpink;
}

Damit das Sticky-Verhalten sichtbar wird, muss mindestens eine Inset-Eigenschaft wie top festgelegt werden. Außerdem muss innerhalb des Scrollcontainers genügend Inhalt zum Scrollen vorhanden sein.

Das frühere Browserpräfix position: -webkit-sticky ist für aktuelle Browser normalerweise nicht mehr erforderlich.

Stapelreihenfolge mit z-index

Wenn sich Elemente überlappen, kann z-index ihre Stapelreihenfolge beeinflussen. Ein höherer Wert wird innerhalb desselben Stapelkontexts normalerweise vor einem niedrigeren Wert dargestellt.

.card {
  position: relative;
}

.background-box {
  position: absolute;
  inset: 20px;
  z-index: 1;
}

.foreground-box {
  position: absolute;
  inset: 40px;
  z-index: 2;
}

Mögliche Werte für z-index

• auto: Es wird keine eigene numerische Stapelstufe festgelegt. Dies ist der Standardwert.
• Eine Ganzzahl, beispielsweise 0, 1, 10 oder -1

z-index wirkt nicht einfach global auf der gesamten Webseite. Elemente werden innerhalb von Stapelkontexten angeordnet. Ein untergeordnetes Element kann den Stapelkontext seines Elternelements auch mit einem sehr hohen z-index nicht verlassen.

Neue Stapelkontexte können unter anderem durch positionierte Elemente mit einem von auto abweichenden z-index, durch opacity unter 1 oder durch transform entstehen.

Elemente mit clip-path zuschneiden

Die frühere Eigenschaft clip ist veraltet. Heute wird clip-path verwendet, um ein Element entlang einer geometrischen Form zuzuschneiden.

.image-circle {
  width: 250px;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: circle(50%);
}

.image-inset {
  clip-path: inset(20px 40px 20px 40px);
}

.image-polygon {
  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  );
}

Im Gegensatz zur veralteten Eigenschaft clip funktioniert clip-path nicht nur bei absolut positionierten Elementen und unterstützt verschiedene Formen.