Darstellung und Positionierung

Schauen wir uns die Blockebenenelemente im Bild unten an:

Eine Möglichkeit, die Standardpostion eines Elements zu ändern, besteht darin, seine Positionseigenschaft auf relativ zu setzen.

Mit diesem Wert können wir ein Element relativ zu seiner statischen Standardposition auf der Webseite positionieren.

Obwohl der Code im obigen Beispiel den Browser anweist, eine relative Positionierung des .green-box Elements zu erwarten, gibt er nicht an, wo das .green-box Element auf der Seite positioniert werden soll. Dies geschieht, indem der Positionsdeklaration eine oder mehrere der folgenden Offset-Eigenschaften beigefügt werden, die das Element von seiner standardmäßigen statischen Position wegbewegen:

• top - verschiebt das Element von oben nach unten.

• bottom - verschiebt das Element von unten nach oben.

• left - verschiebt das Element von der linken Seite weg (nach rechts).

• right - verschiebt das Element von der rechten Seite weg (nach links).

Wir können Werte unter anderem in Pixeln, Ems oder Prozentsätzen angeben, um genau festzulegen, wie weit das Element verschoben werden soll. Es ist außerdem wichtig zu beachten, dass Offset-Eigenschaften nicht funktionieren, wenn die Positionseigenschaft des Elements die standardmäßige statische Eigenschaft ist.

Eine andere Möglichkeit, die Position eines Elements zu ändern, besteht darin, seine Position auf absolute zu setzen.

Wenn die Position eines Elements auf absolute gesetzt ist, ignorieren alle anderen Elemente auf der Seite das Element und verhalten sich, als wäre es nicht auf der Seite vorhanden. Das Element wird relativ positioniert zu seinem am nächsten positionierten übergeordneten Element, während Offset-Eigenschaften verwendet werden können, um von dort aus die endgültige Position zu bestimmen.

Sehen wir uns das Bild unten an:

Wenn die Position eines Elements auf absolute gesetzt wird, wie in der letzten Übung, wird das Element zusammen mit dem Rest des Dokuments gescrollt, wenn ein Benutzer scrollt.

Wir können ein Element an einer bestimmten Position auf der Seite fixieren (unabhängig vom Scrollen des Benutzers), indem wir seine Position auf fixed setzen und es mit den bekannten Offset-Eigenschaften versehen (top, bottom, left und right).

Im obigen Beispiel bleibt das Element .title an seiner Position fixiert, unabhängig davon, wohin der Benutzer auf der Seite scrollt, wie im Bild unten:

Da static positionierte relative Elemente im normalen Dokumentfluss verbleiben, werden diese Elemente auch gescrollt, wenn ein Benutzer die Seite (oder das übergeordnete Element) scrollt. Da fixed positionierte absolute Elemente aus dem Dokumentfluss entfernt werden, bleiben diese Elemente an ihrer angegebenen Offsetposition, wenn ein Benutzer scrollt.

Der sticky Wert ist ein weiterer Positionswert, der ein Element im Dokumentfluss hält, während der Benutzer scrollt, aber an einer angegebenen Position bleibt, wenn die Seite weiter gescrollt wird. Dies geschieht durch die Verwendung des sticky Werts zusammen mit den bekannten Offset-Eigenschaften sowie einer neuen.

Im obigen Beispiel bleibt das .box-bottom <div> an seiner relativen Position und scrollt wie gewohnt. Wenn es 240 Pixel von oben erreicht, bleibt es an dieser Position, bis es den unteren Rand seines übergeordneten Containers erreicht, wo es sich "löst" und sich wieder dem Fluss des Dokuments anschließt.

Wenn Boxen auf einer Webseite eine Kombination verschiedener Positionen haben, können sich die Boxen (und damit ihr Inhalt) überlappen, wodurch der Inhalt schwer zu lesen oder zu konsumieren ist.

Im obigen Beispiel überlappt das .green-box Element das .blue-box Element.

Die z-index Eigenschaft steuert, wie weit hinten oder vorne ein Element auf der Webseite erscheinen soll, wenn sich Elemente überlappen. Dies kann man sich als die Tiefe von Elementen vorstellen, wobei tiefere Elemente hinter flacheren Elementen erscheinen.

Die z-index Eigenschaft akzeptiert ganzzahlige Werte. Abhängig von ihren Werten weisen die Ganzzahlen den Browsern an, in welcher Reihenfolge Elemente auf der Webseite geschichtet werden sollen.

Im obigen Beispiel haben wir die .blue-box Position auf relative und den Z-Index auf 1 gesetzt. Wir haben die Position auf relative geändert, da die Z-Index Eigenschaft bei statischen Elementen nicht funktioniert. Der Z-Index von 1 verschiebt das .blue-box Element nach vorne, da der Z-Index Wert nicht explizit für das .green-box Element angegeben wurde, was bedeutet, dass es einen Standard-Z-Index-Wert von 0 hat.

Sehen wir uns das an im Beispielbild unten:

Jedes HTML-Element verfügt über einen Standardanzeigewert, der vorgibt, ob es den horizontalen Raum mit anderen Elementen teilen kann. Einige Elemente füllen den gesamten Browser von links nach rechts aus, unabhängig von der Größe ihres Inhalts. Andere Elemente nehmen nur so viel horizontalen Platz ein, wie ihr Inhalt erfordert und können direkt neben anderen Elementen platziert werden.

In dieser Lektion behandeln wir drei Werte für die Anzeigeeigenschaft:

• inline 

• block 

• inline-block 

Die Standardanzeige für einige Elemente, wie z.B. <em>, <strong> und <a>, wird als Inline bezeichnet. Inline-Elemente verfügen über eine Box, die ihren Inhalt eng umschließt, nur so viel Platz einnimmt, wie für die Anzeige ihres Inhalts erforderlich ist und nicht nach jedem Element eine neue Zeile erfordert. Die Höhe und Breite dieser Elemente kann im CSS-Dokument nicht angegeben werden. Beispielsweise wird der Text eines Ankertags (<a>) standardmäßig in derselben Zeile wie der umgebende Text angezeigt und ist nur so breit wie nötig, um seinen Inhalt aufzunehmen. Die Größe von inline Elementen kann nicht mit den CSS-Eigenschaften height oder width geändert werden.

Im obigen Beispiel ist das <em> Element inline, da es seinen Inhalt in derselben Zeile anzeigt wie den umgebenden Inhalt, einschließlich des Ankertags. In diesem Beispiel wird Folgendes angezeigt:

Um mehr über inline Elemente zu erfahren, gibt es die MDN-Dokumentation.

Die CSS-Anzeigeeigenschaft bietet die Möglichkeit, jedes Element zu einem Inline-Element zu machen. Dazu gehören Elemente, die standardmäßig nicht inline sind, wie Absätze, Divs und Überschriften.

Einige Elemente werden nicht in derselben Zeile wie der sie umgebende Inhalt angezeigt. Diese werden als Elemente auf Blockebene bezeichnet. Diese Elemente füllen standardmäßig die gesamte Breite der Seite aus, ihre Breiteneigenschaft kann jedoch auch festgelegt werden. Sofern nicht anders angegeben, haben sie die Höhe, die zur Aufnahme ihres Inhalts erforderlich ist.

Zu den Elementen, die standardmäßig auf Blockebene sind, gehören alle Ebenen von Überschriftenelementen (<h1> bis <h6>), <p>, <div> und <footer>. Eine vollständige Liste der Elemente auf Blockebene finden wir bei der MDN-Dokumentation.

Der dritte Wert für die Anzeigeeigenschaft ist inline-block. Die Inline-Block-Anzeige kombiniert Funktionen von Inline- und Blockelementen. Inline-Block-Elemente können nebeneinander erscheinen und wir können ihre Abmessungen mithilfe der Eigenschaft "width" und "height" festlegen. Bilder sind das beste Beispiel für Standard-Inline-Block-Elemente.

Die folgenden <div>s werden beispielsweise in derselben Zeile und mit den angegebenen Abmessungen angezeigt:

Werfen wir einen Blick auf den Code:

Bisher haben wir gelernt, wie wir die genaue Position eines Elements mithilfe von Offset-Eigenschaften angeben. Wenn wir einfach nur ein Element so weit wie möglich nach links und rechts im Container verschieben möchten, können wir die float Eigenschaft verwenden.

Die Float-Eigenschaft wird häufig zum Umbrechen von Text um ein Bild verwendet. Beachten wir jedoch, dass das Verschieben von Elementen nach links oder rechts für Layoutzwecke besser für Tools wie CSS-Raster und Flexbox geeigent ist, die wir später kennenlernen werden.

Die Float-Eigenschaft wird mit diesem Werten festgelegt:

• left - Verschiebt Elemente so weit wie möglich nach links.

• right - Verschiebt Elemente so weit wie möglich nach rechts.

Im obigen Beispiel verschieben wir das .orange-section Element nach rechts. Dies funktioniert für statische und relativ positionierte Elemente. Sehen wir uns das Ergebnis des folgenden Codes an:

Die Eigenschaft float kann auch verwendet werden, um mehrere Elemente gleichzeitig schweben zu lassen. Wenn jedoch mehrere schwebende Elemente unterschiedliche Höhen haben, kann sich dies auf deren Anordnung auf der Seite auswirken. Insbesondere können Elemente aneinander "stoßen" und es anderen Elementen nicht ermöglichen, sich ordnungsmäßig nach links oder rechts zu bewegen.

Die Eigenschaft clear gibt an, wie sich Elemente verhalten sollen, wenn sie auf der Seite aneinander stoßen. Es kann einen der folgenden Werte annehmen:

• left - Die linke Seite des Elements berührt kein anderes Element innerhalb desselben enthaltenden Elements.

• right - Die rechte Seite des Element berührt kein adneres Element innerhalb desselben enthaltenden Elements.

• both - Keine Seite des Elements berührt ein anderes Element innerhalb desselben enthaltenden Elements.

• none - Das Element kann jede Seite berühren.