CSS Positionierung

Das CSS-Positionierungsattribut (Positioning) ermöglicht die Positionierung von Elementen.

CSS Positionierung und Fließfähigkeit

CSS bietet einige Attribute für Positionierung und Fließfähigkeit, mit denen man Spaltenlayout erstellen kann, Teile des Layouts überlappen lassen und Aufgaben erledigen kann, die in den letzten Jahren oft mehrere Tabellen erforderten.

Die Grundidee der Positionierung ist sehr einfach, sie ermöglicht es Ihnen, die Position des Elements relative zu seinem normalen Standort zu definieren, oder relative zum Eltern-Element, einem anderen Element oder sogar zum Browserfenster selbst. Offensichtlich ist diese Funktion sehr mächtig und auch sehr überraschend. Um zu verstehen, dass die Unterstützung des Benutzeragents für die Positionierung in CSS2 weit überlegen ist als für andere Aspekte, sollte man sich nicht wundern.

Andererseits wurde die Fließfähigkeit zum ersten Mal in CSS1 vorgestellt, die auf einer Funktion basiert, die Netscape in den frühen Jahren der Webentwicklung hinzufügte. Die Fließfähigkeit ist nicht vollständig eine Positionierung, aber natürlich auch nicht eine normale Flusslayout. Wir werden im folgenden Kapitel die Bedeutung der Fließfähigkeit klären.

alles ist ein Rahmen

Elemente wie div, h1 oder p werden oft als Blockelemente bezeichnet. Dies bedeutet, dass diese Elemente alsein Blockinhaltd.h. „Blockrahmen“. Gegensätzlich werden Elemente wie span und strong als „Inline-Elemente“ bezeichnet, da ihr Inhalt in einer Zeile angezeigt wird, d.h. in einem „Inline-Rahmen“.

Man kann Eigenschaft displayändere den generierten Rahmen-Typ. Dies bedeutet, dass durch die Einstellung der Eigenschaft display auf block Inline-Elemente (z.B. <a>-Elemente) so behandelt werden können, als wären sie Blockelemente. Es kann auch durch die Einstellung von display auf none verhindert werden, dass ein generierter Element keine Rahmen hat. In diesem Fall wird der Rahmen sowie alle Inhalte nicht angezeigt und nehmen keinen Platz im Dokument ein.

In einem Fall wird jedoch ein Blockelement erstellt, selbst wenn keine explizite Definition vorgenommen wird. Dies geschieht, wenn Text zu einem Blockelement (z.B. div) hinzugefügt wird. Selbst wenn dieser Text nicht als Absatz definiert wird, wird er als Absatz behandelt:

<div>
some text
<p>Some more text.</p>
</div>

In diesem Fall wird dieser Rahmen als namenloser Blockrahmen bezeichnet, da er nicht mit speziell definierten Elementen verbunden ist.

Der Text der Blockelemente verhält sich ebenfalls ähnlich. Angenommen, es gibt einen Absatz mit drei Zeilen Text. Jede Textzeile bildet einen namenlosen Rahmen. Stile können nicht direkt auf namenlose Blockrahmen oder Zeilenrahmen angewendet werden, da es keinen Ort gibt, an dem Stile angewendet werden können (Beachten Sie, dass Zeilenrahmen und Inline-Rahmen zwei verschiedene Konzepte sind). Dies hilft jedoch zu verstehen, dass alles, was auf dem Bildschirm angezeigt wird, irgendwie einen Rahmen bildet.

CSS-Positionierungsmechanismus

CSS hat drei grundlegende Positionierungsmechanismen: Normalfluss, Floating und absolute Positionierung.

Es sei denn, es wird ausdrücklich angegeben, sonst werden alle Rahmen im Normalfluss positioniert. Das bedeutet, dass der Ort der Elemente im Normalfluss durch ihre Position im (X)HTML bestimmt wird.

Blockrahmen werden von oben nach unten und von einem auf den anderen folgen. Der vertikale Abstand zwischen den Rahmen wird durch die vertikale Außenabstand des Rahmens berechnet.

Inline-Rahmen werden in einer Zeile horizontal angeordnet. Man kann die Abstände zwischen ihnen durch horizontale Innenabstände, Ränder und Außenabstände anpassen. Der vertikale Innenabstand, der Rand und der Außenabstand haben jedoch keinen Einfluss auf die Höhe des Inline-Rahmens. Der horizontale Rahmen, der von einer Zeile gebildet wird, wird alsZeilenrahmen (Line Box)Die Höhe des Zeilenrahmens ist immer ausreichend, um alle enthaltenen Inline-Zeilenrahmen zu fassen. Allerdings kann die Zeilenhöhe die Höhe dieses Rahmens erhöhen.

In den folgenden Kapiteln werden wir Ihnen detailliert die relative Ausrichtung, absolute Ausrichtung und das Floating erläutern.

CSS-position-Eigenschaft

Durch die Verwendung von PositionseigenschaftWir können aus vier verschiedenen Arten der Ausrichtung wählen, die den Generierungsstil des Elementrahmens beeinflussen.

Bedeutung des Attributs position:

static
Das Elementrahmen wird normal generiert. Blockelemente erzeugen einen Rechteckrahmen, der als Teil des Dokumentflusses betrachtet wird, während Inline-Elemente einen oder mehrere Zeilenrahmen erzeugen, die im Elternrahmen platziert werden.
relative
Der Elementrahmen verschiebt sich um einen bestimmten Abstand. Der Element behält seine ursprüngliche Form bei, und der原来 genommene Raum bleibt erhalten.
absolut
Der Elementrahmen wird vollständig aus dem Dokumentfluss entfernt und relativ zu seinem Inhaltrahmen positioniert. Der Inhaltrahmen kann ein anderer Element im Dokument oder der ursprüngliche Inhaltrahmen sein. Der原来 im normalen Dokumentfluss genommene Raum wird geschlossen, als ob der Element ursprünglich nicht existiert hätte. Nach der Positionierung wird ein Blockrahmen erzeugt, unabhängig davon, welche Art von Rahmen er im normalen Fluss ursprünglich erzeugt hat.
fest
Das Verhalten des Elementrahmens ähnelt dem Setzen von position auf absolute, jedoch ist der Inhaltrahmen die Ansicht selbst.

Tipp:Relative Positionierung wird tatsächlich als Teil des normalen Fluss-Positionierungsmodells betrachtet, da die Position der Elemente relativ zu ihrer Position im normalen Fluss ist.

Beispiel

Positionierung: Relativ positioniert
Dieses Beispiel zeigt, wie man Elemente relativ zu ihrer normalen Position positioniert.
Positionierung: Absolut positioniert
Dieses Beispiel zeigt, wie man Elemente mit absoluten Werten positioniert.
Positionierung: Fest positioniert
Dieses Beispiel zeigt, wie man Elemente relativ zum Browserfenster positioniert.
Obere Kante eines Bildes mit einem festen Wert einstellen
Dieses Beispiel zeigt, wie man die obere Kante eines Bildes mit einem festen Wert einstellt.
Obere Kante eines Bildes mit einem Prozentsatzwert einstellen
Dieses Beispiel zeigt, wie man die obere Kante eines Bildes mit einem Prozentsatzwert einstellt.
Untere Kante eines Bildes mit einem Pixelwert einstellen
Dieses Beispiel zeigt, wie man die untere Kante eines Bildes mit einem Pixelwert einstellt.
Untere Kante eines Bildes mit einem Prozentsatzwert einstellen
Dieses Beispiel zeigt, wie man die untere Kante eines Bildes mit einem Prozentsatzwert einstellt.
Linke Kante eines Bildes mit einem festen Wert einstellen
Dieses Beispiel zeigt, wie man die linke Kante eines Bildes mit einem festen Wert einstellt.
Linke Kante eines Bildes mit einem Prozentsatzwert einstellen
Dieses Beispiel zeigt, wie man die linke Kante eines Bildes mit einem Prozentsatzwert einstellt.
Rechte Kante eines Bildes mit einem festen Wert einstellen
Dieses Beispiel zeigt, wie man die rechte Kante eines Bildes mit einem festen Wert einstellt.
Rechte Kante eines Bildes mit einem Prozentsatzwert einstellen
Dieses Beispiel zeigt, wie man die rechte Kante eines Bildes mit einem Prozentsatzwert einstellt.
Wie man mit dem Scrollbalken den Inhalt der Überläufe im Element anzeigen kann
Dieses Beispiel zeigt, wie man die Eigenschaft overflow einstellt, um eine bestimmte Aktion zu regeln, wenn der Inhalt eines Elements zu groß ist und den angegebenen Bereich übersteigt.
Wie man den Inhalt der Überläufe in einem Überlaufelement verbergen kann
Dieses Beispiel zeigt, wie man die Eigenschaft overflow einstellt, um den Inhalt zu verbergen, wenn der Inhalt eines Elements zu groß ist, um in das angegebene Gebiet zu passen.
Wie man den Browser dazu bringt, Überläufe automatisch zu verarbeiten
Dieses Beispiel zeigt, wie man den Browser dazu bringt, Überläufe automatisch zu verarbeiten.
Form eines Elements einstellen
Dieses Beispiel zeigt, wie man die Form eines Elements einstellt. Dieses Element wird in diese Form geschnitten und angezeigt.
Vertikale Einreihung von Bildern
Dieses Beispiel zeigt, wie man Bilder vertikal in Text einreihen kann.
Z-index
Z-index kann verwendet werden, um ein Element hinter einem anderen Element zu platzieren.
Z-index
上面的例子中的元素已经更改了Z-index。

Z-index

Der Element in den obigen Beispielen hat den Z-index geändert.

CSS-Positionseigenschaften CSS-Positionseigenschaften ermöglichen die Positionierung von Elementen.
Eigenschaft Beschreibung
position Platziert das Element in eine statische, relative, absolute oder feste Position.
top Definiert den Abstand zwischen der oberen Außenrandgrenze des positionierten Elements und der oberen Außenrandgrenze des EnVELOPs.
right Definiert den Abstand zwischen der rechten Außenrandgrenze des positionierten Elements und der rechten Außenrandgrenze des EnVELOPs.
bottom Definiert den Abstand zwischen der unteren Außenrandgrenze des positionierten Elements und der unteren Außenrandgrenze des EnVELOPs.
left Definiert den Abstand zwischen der linken Außenrandgrenze des positionierten Elements und der linken Außenrandgrenze des EnVELOPs.
overflow Legt fest, was passiert, wenn der Inhalt des Elements über den Bereich hinausgeht.
vertical-align Legt die vertikale Ausrichtung des Elements fest.
z-index Legt die Stauordnung des Elements fest.