CSS-Grundlagen: Position und Float

CSS bietet Eigenschaften zum Positionieren und Schweben, mit denen Sie Spaltenlayouts erstellen, einen Teil eines Layouts mit einem anderen überlappen und Aufgaben erledigen können, für die jahrelang oft die Verwendung mehrerer Tabellen erforderlich war.
Die Grundidee der Positionierung ist einfach: Sie ermöglicht es Ihnen, zu definieren, wo die Box eines Elements relativ zu seiner normalen Position oder relativ zu einem übergeordneten Element, einem anderen Element oder sogar dem Browserfenster selbst erscheinen soll. Offensichtlich ist diese Funktion sehr mächtig und überraschend. Es sollte nicht überraschen, dass Benutzeragenten die Positionierung in CSS2 viel besser unterstützen als andere Aspekte.
Floats hingegen wurden erstmals in CSS1 eingeführt und basierten auf einer Funktion, die Netscape in den frühen Tagen des Webs hinzugefügt hatte. Beim Floating handelt es sich zwar nicht genau um eine Positionierung, aber es handelt sich sicherlich auch nicht um ein normales Flow-Layout. Wir werden die Bedeutung von Float in einem späteren Kapitel klären.

alles ist ein Rahmen

Ein div-, h1- oder p-Element wird oft als Element auf Blockebene bezeichnet. Dies bedeutet, dass diese Elemente als ein Inhaltsblock, eine „Blockbox“, erscheinen. Im Gegensatz dazu werden Elemente wie span und strong als „Inline-Elemente“ bezeichnet, da ihr Inhalt innerhalb einer Zeile, einer „Inline-Box“, erscheint.
Sie können den Typ der generierten Box mithilfe der Anzeigeeigenschaft ändern. Das bedeutet, dass Sie Inline-Elemente (z. B. <a>-Elemente) dazu bringen können, sich wie Elemente auf Blockebene zu verhalten, indem Sie die Anzeigeeigenschaft auf Block setzen. Sie können die Anzeige auch auf „Keine“ setzen, sodass das generierte Element überhaupt keine Box hat. Dadurch ist die Box mit ihrem gesamten Inhalt nicht mehr sichtbar und nimmt keinen Platz im Dokument ein.
In einem Fall werden jedoch Elemente auf Blockebene auch ohne explizite Definition erstellt. Dies geschieht, wenn Sie am Anfang eines Elements auf Blockebene (z. B. einem Div) Text hinzufügen. Auch wenn der Text nicht als Absatz definiert ist, wird er als solcher behandelt:


In diesem Fall wird die Box als unbenannte Blockbox bezeichnet, da sie keinem spezifisch definierten Element zugeordnet ist.
Ähnliches passiert mit Textzeilen für Elemente auf Blockebene. Angenommen, Sie haben einen Absatz mit drei Textzeilen. Jede Textzeile bildet ein unbenanntes Feld. Sie können Stile nicht direkt auf namenlose Blöcke oder Linienkästen anwenden, da es keinen Ort zum Anwenden von Stilen gibt (beachten Sie, dass Linienkästen und Inline-Kästen zwei unterschiedliche Konzepte sind). Es hilft jedoch zu verstehen, dass alles, was Sie auf dem Bildschirm sehen, eine Art Kästchen bildet.

CSS-Positionierungsmechanismus

CSS verfügt über drei grundlegende Positionierungsmechanismen: Normalfluss, Float und absolute Positionierung.
Alle Boxen werden im normalen Fluss positioniert, sofern nicht anders angegeben. Das heißt, die Position eines Elements in einem normalen Stream wird durch die Position des Elements in X(HTML) bestimmt.
Boxen auf Blockebene werden nacheinander von oben nach unten angeordnet, und der vertikale Abstand zwischen den Boxen wird aus den vertikalen Rändern der Boxen berechnet.
Inline-Boxen werden horizontal in einer Reihe angeordnet. Ihr Abstand kann durch horizontale Abstände, Ränder und Ränder angepasst werden. Vertikaler Abstand, Rahmen und Ränder haben jedoch keinen Einfluss auf die Höhe des Inline-Felds. Die durch eine Linie gebildete horizontale Box wird als Linienbox bezeichnet. Die Höhe einer Zeilenbox ist immer hoch genug, um alle darin enthaltenen Inline-Boxen aufzunehmen. Durch Festlegen der Zeilenhöhe kann sich jedoch die Höhe dieses Felds erhöhen.
Im Folgenden erklären wir die relative Positionierung, die absolute Positionierung und das Floating im Detail.

CSS-Positionseigenschaft

Mithilfe der Positionseigenschaft können wir zwischen vier verschiedenen Positionierungsarten wählen, die sich darauf auswirken, wie die Box des Elements generiert wird.
Die Bedeutung des Positionsattributwerts:
statisch
Die Elementbox wird normal generiert. Elemente auf Blockebene erstellen ein rechteckiges Feld als Teil des Dokumentflusses, während Inline-Elemente ein oder mehrere Zeilenfelder erstellen, die innerhalb ihres übergeordneten Elements platziert werden.
relativ
Die Elementbox ist um einen bestimmten Abstand versetzt. Das Element behält seine unpositionierte Form und den Platz, den es ursprünglich einnahm.
Absolute
Die Elementbox wird vollständig aus dem Dokumentenfluss entfernt und relativ zu ihrem enthaltenden Block positioniert. Der umschließende Block kann ein anderes Element im Dokument oder der anfängliche umschließende Block sein. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.
behoben
Die Elementbox verhält sich so, als würde man die Position auf „absolut“ setzen, mit der Ausnahme, dass ihr enthaltender Block das Ansichtsfenster selbst ist.
Tipp: Die relative Positionierung wird tatsächlich als Teil des normalen Flusspositionierungsmodells betrachtet, da die Position eines Elements relativ zu seiner Position im normalen Fluss ist.

CSS-Positionierungseigenschaften

Mit CSS-Positionierungseigenschaften können Sie Elemente positionieren.
Beschreibung der Immobilie
Position platziert das Element an einer statischen, relativen, absoluten oder festen Position.
top definiert den Versatz zwischen der oberen Randgrenze eines positionierten Elements und der oberen Grenze seines enthaltenden Blocks.
right definiert den Versatz zwischen der rechten Randkante des positionierten Elements und der rechten Kante des enthaltenden Blocks.
Bottom definiert den Versatz zwischen der unteren Randgrenze des positionierten Elements und der unteren Grenze seines enthaltenden Blocks.
left definiert den Versatz zwischen der linken Randkante des positionierten Elements und der linken Kante seines enthaltenden Blocks.
Überlauf legt fest, was passiert, wenn der Inhalt eines Elements seinen Bereich überschreitet.
Clip legt die Form des Elements fest. Das Element wird in diese Form zugeschnitten und dann angezeigt.
Vertical-Align legt die vertikale Ausrichtung eines Elements fest.
Z-Index legt die Stapelreihenfolge der Elemente fest.