Positionieren

Positionierung Selfhtml

Position

position

Die Eigenschaft position bietet 4 verschiedene Möglichkeiten der Positionierung. Weitere Infos siehe unten.

Das Beispiel veranschaulicht die Werte

siehe auch dieses Beispiel

position
Eigenschaft Wert Bedeutung
position static das Element positioniert sich im Textfluss
relative relative die Abweichung des Elements vom Textfluss
absolute Positionierung in Bezug auf den Vorfahren, der nicht static ist. Ansonsten Positionierung zum body Element. In Bezug auf Größe fällt das Element zurück auf den Inhalt. Es ist also nicht mehr so breit wie das Elternelement sondern so groß wie sein Inhalt. Es fällt aus der Reihenfolge der Elemente heraus, soll heißen es liegt auf einer Ebene darüber, die anderen Elemente ignorieren seine Größe. Setzt man keine Werte mit top, left, right, bottom, liegt es erstmal an der Stelle wo es vorher war. Position absolute scrollt mit.
sticky Das Element scrollt mit. Wenn es an der definierten Position angekommen ist, bleibt es stehen.
fixed Entspricht absolute, aber das Element wird beim scrollen nicht mitbewegt.
Standardwert static
Vererbbar nein
Anwendbar Alle Elemente

Startposition

Wo ein Element platziert werden soll, wird über folgende Startpositionen festgelegt.

div {position: absolute; top: 30px; left: 50px; width: 300px;}

Startpositionen

top:

oben

Zahlenangaben

prozentual zum Elternelement

auto = automatische Positionierung

right: rechts
bottom: unten
left: links

 

margin padding

Mit top left, wird die linke obere Ecke in Bezug auf das Elternelement oder den Viewport bestimmt. right bezieht sich auf den rechten Rand, bottom auf den unteren.

Achtung! Elemente mit der Eigenschaft position: static (Standardeigenschaft) lassen sich mit den Werten nicht positioniern.

Position relative

Ohne Positionierung hätte das Objekt eine Position im Textfluss. Durch die Eigenschaft relative kann man diese Positionierung um einen horizontalen und vertikalen Wert verschieben. Andere Elemente beachten diese Verschiebung nicht, sondern werden im Elementfluss so angeordnet, als wäre das Element nicht verschoben. so sieht's aus

Position absolute

Das Objekt wird aus dem Textfluss genommen und erhält eine absolute Positionierung zum Elternelement, welches nicht als statisch definiert ist. so sieht's aus. Insofern verhält es sich durchaus relativ, wie man in diesem Beispiel mit Verschachtelung sehen kann.

Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben.

Wie kann man ein Element mit Position absolute mittig auf die Seite setzen? Eine Möglichkeit besteht darin, dass man das Eltern-Element mit position: relative auszeichnet und dieses Elternelement mit margin: auto mittig platziert.
so sieht's aus

Wenn das Elternelement nicht static ist, bezieht sich top, left, bottom, right und auch eine prozentuale width auf dieses Elternelement.

Position sticky
Ein Element welches mit position: sticky; ausgezeichnet ist. Wird normal im Textfluss angezeigt und scrollt mit. Wenn es an der definierten Position angekommen ist (top, bottom, etc.) bleibt das Element stehen und scrollt nicht weiter. Es verhält sich dann wie position fixed. Wichtig ist hierbei auch die Höhe des Elternelements. Wenn man weiterscrollt und das Ende des Elternelements ist erreicht, scrollt das mit sticky ausgezeichnete Element weiter.
Achtung
Es wird allerdings noch nicht richtig supported und es gibt eine Menge Umstände / Eigenschaften, die das Verhalten beeinflussen und kompliziert machen. Also ist es im Moment für den Produktiveinsatz eher nicht zu gebrauchen (Ende 2020)
so sieht`s aus
so sieht`s aus mit Elternelement

sticky ist auch eine Alternative zu fixed, wenn es darum geht, dass sich die Breite des fixierten Elements an der Breite des Elternelements orientiert.
so sieht`s aus fixierter Footer mit der Breite des Elternelements
Position fixed

Die Wertzuweisung fixed verhält sich wie absolute mit dem Unterschied, dass das Element nicht mitscrollt.

Außerdem muss man diesen Elementen eine Breite zuweisen. Das normale Verhalten von Blockelementen, sich über die gesamte Breite auszubreiten, entfällt.

In diesem Beispiel befindet sich ein kleines Rechteck unten rechts. Damit das Element nicht über anderen Inhalten plaziert wird, sollte man im body Platz schaffen mit margin. Auch ein footer, der immer am unteren Rand sichtbar ist kann so erzeugt werden. so sieht's aus

Breite und Höhe

Inline Elementen kann man keine Breite oder Höhe zuweisen. Die Maße werden durch den Inhalt bestimmt. Lediglich Blockelemente und Inline-Blockelementen kann man Breite und Höhe zuweisen.

so sieht's aus

Ist die Box kleiner als der Inhalt gibt es verschiedene Möglichkeiten, mit CSS zu reagieren.

width height
width: Breite

Zahlenangaben Maßeinheit

prozentual relativ zur Breite des Elternelements

auto = automatische Festlegung

height: Höhe
Standardwert auto
Vererbbar nein
Anwendbar Blockelemente , Inline-Blockelemente

Minimal und Maximal Werte festlegen

min-height
max-height
min-wight
max-width

Mit der min-Eigenschaft kann man eine minimale Größe definieren. Das ist sinnvoll, wenn der Inhalt kleiner ist, als die Box.

Überlauf festlegen

Wenn der Inhalt größer ist als die Größe, kann man mittels overflow die Darstellung bestimmen.

so sieht's aus

overflow

Desweiteren kann man dieses Verhalten auch nur für den vertikalen oder horizontalen Bereich definieren. Die Werte sind die gleichen.

overflow-y, overflow-x

so sieht's aus

overflow
Eigenschaft Wert Bedeutung
overflow visible Der Inhalt ist sichtbar auch außerhalb des Elements.
hidden Überfließender Inhalt wird abgeschnitten.
auto Überfließender Inahlt ist mittels Scrollbalken erreichbar. Die Scrollbalken werden angezeigt, wenn man sie braucht.
scroll Horizontale und vertikale Scrollbalken werden eingeblendet, egal ob sie gebraucht werden oder nicht.
Standardwert visible
Vererbbar nein
Anwendbar Alle Block-Elemente

 

scrollbar-color

siehe auch css-tricks

Man kann das Aussehen einer Scrolleiste bestimmen.

scrollbar-color
Eigenschaft Wert Bedeutung
scrollbar-color farbwert farbwert 2 Farbwerte, die erste für den Scrollbutton, die zweite für den Hintergrund
dark dunkel
light hell
auto

Standardfarbe

Standardwert auto
Vererbbar nein
Anwendbar Alle Block-Elemente

Mit den Webkit Prefix funktioniert es auch im Chrome.

html {
--scrollbarBG:  #90725A;
--thumbBG: #765124 ;
}
.box::-webkit-scrollbar {
width: 14px;
}
.box {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.box::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
.box::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border-radius: 6px;
border: 3px solid var(--scrollbarBG);
}

resize

Es ist möglich, dass man ein div Element für den User als skalierbar definiert. Hier steht die CSS Eigenschaft resize zur Verfügung.

so sieht's aus

resize
Eigenschaft Wert Bedeutung
resize none nicht skalierbar
both in Breite und Höhe skalierbar
horizontal horizontal sklaierbar
vertical vertikal skalierbar
Standardwert none
Vererbbar nein
Anwendbar Alle Block-Elemente

 

float

Text um Bilder fließen lassen, Elemente nebeneinandern anordnen

Video Tipp siehe auch meinen Video Tipp float

float

Mit der Eigenschaft float kann man Elemente (Bilder, Blockelemente, Textstellen) von nachfolgenden Texten umfließen lassen. Der normale Elementfluss sieht vor, dass Blockelemente in der Reihenfolge erscheinen, in der sie notiert sind. Das heißt Absätze werden untereinander gestellt. Mit float kann man sie nebeneinander anordnen sofern sie wegen einer definierten Breite nebeneinander passen.

Gibt man einem Element die Eigenschaft float, fließen alle Inline Elemente um das Element. Ein Blockelement welches float zugewiesen wird, fällt auf seinen Inhalt zurück (Es ist so groß wie sein Inhalt). Float ändert also die Darstellungseigenschaft eines Elements. Ein gefloatetes Element fällt aus dem Fluss.

so sieht`s aus

Ein gefloatetes Element kann nur von inline Elementen umflossen werden und von Blockelementen, die selbst ein Float bekommen haben.

so sieht`s aus

Nach den Regeln wird ein gefloatetes Element soweit wie möglich im Elternelement nach oben gesetzt und dann nach links oder rechts verschoben, bis es auf den Rand des Elternelements oder eines anderen gefloateten Elements trifft. (Verkleinere das Browserfenster im nachfolgenden Beispiel).

so sieht`s aus

Ein Inline Element welches float zugewiesen wurde, kann man eine Breite und Höhe zuweisen.

so sieht`s aus

In folgendem Beispiel werden gleichgroße Div- Elemente nebeneinander angeordnet, sofern genug Platz vorhanden ist. Verkleinern Sie das Browserfenster, um das Verhalten zu sehen.

so sieht's aus

In diesem Beispiel sieht man auch mehrere Elemente, die alle mit float: left nebeneinander angeordnet sind, sofern genug Platz vorhanden ist. Wenn am rechten Rand nicht mehr genügend Platz vorhanden ist, um das Element darzustellen, verschiebt es sich nach unten und nach links, bis es an einen linken Rand stößt. Wie man in diesem Beispiel sieht, muss das nicht der linke Rand des Viewports sein, sondern kann auch die untere Kante eines höheren Elements sein.

Nach den Regeln wird ein gefloatetes Element soweit wie möglich im Elternelement nach oben gesetzt und dann nach links oder rechts verschoben, bis es auf den Rand des Elternelements oder eines anderen gefloateten Elements trifft.

so sieht's aus

weiteres Beispiel

float
Eigenschaft Wert Bedeutung
float left das Element steht links und wird rechts umflossen
right das Element steht rechts und wird links umflossen
none das Element wird nicht umflossen
Standardwert none
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente

clear

Um den normalen Textfluss wiederherzustellen verwendet man clear. Das erste Blockelement welches die Höhe des Floats berücksichtigt, wird darunter angezeigt, wenn man ihm die Eigenschaft clear mit entsprechenden Wert zuweist (left, right, both). Es setzt ein Blockelement voraus. Am Besten man weist ihm clear: both; zu. Das clear beendet keinen float sondern, die Eigenschaft clear sagt dem Element nur, stelle dich unter ein gefloatetes Element. Da man diese Eigenschaft nur Blockelementen zuweisen darf, muss man in Inline Element, welches clear bekommt, in ein Block Element ändern.

Im folgenden Beispiel wird das span Element unter dem Bild angezeigt. Das hat außerdem den Vorteil, dass auch die Höhe des p- Containers sich bis unter das Bild ausbreitet, denn das span liegt ja als Blockelement unter dem Bild.

so sieht's aus

Micro Clearfix

Wenn man jedoch kein HTML Element für diesen Zweck erzeugen will, gibt es einen Trick, der als Micro Clearfix bekannt geworden ist. Mit dem Pseudoelement :after wird ein Element erzeugt, welches mit clear:both versehen wird. Es ist wichtig zu verstehen, dass ein solches Element sich innerhalb des Elements vor dem schließenden Tag befindet, welches mit :after versehen wurde. Mit display:table, sorgt man dafür, dass es auf seine Größe zurückfällt, welche quasi nicht vorhanden ist.

.clearfix::after{
	content:"";
	display:table;
	clear:both;
	}

so sieht`s aus

read more...

Auch Inline Elementen wie <a> oder <span> kann man floaten. Es folgt ein typisches Blog- Beispiel, in dem die "more..." Textstelle rechts ausgerichtet wird. Weitere Infos im Beispiel.

more...

Gefloatete Elemente werden ignoriert

Es ist wichtig zu verstehen, dass das erste Element welches mit clear ausgezeichnet wurde, die Höhe des Floats berücksichtigt.

Hier 4 Beispiele, die verdeutlichen, warum in bestimmten Situationen verschachtelte, gefloatete Elemente, nicht die Hintergrundfarbe des Elternelements annehmen. Studiere die Beispiele der Reihe nach.

Beispiel1 Beispiel2 Beispiel3 Beispiel4

Hier ähnliche Beispiele aus der Praxis. Weitere Erklärungen findet man in den Beispielen:

Layout1 / Layout2

clear
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar nein
Anwendbar Block Elemente
clear left stellt den normalen Elementfluss nach der Verwendung von float:left wieder her
right stellt den normalen Elementfluss nach der Verwendung von float:right wieder her
both stellt den normalen Elementfluss wieder her
none float behält seine Gültigkeit

Unsichtbare Elemente

visibility

Mit der CSS Eigenschaft visibilty kann man Elemente verbergen. Besonders im Zusammenhang mit Programmiersprachen wie Javascript ist diese Eigenschaft interessant. Unsichtbar heißt nicht, dass der Platz, den das Element einnimmt, freigegeben wird.

so sieht's aus

visibility
Eigenschaft Wert Bedeutung
visibility visible sichtbar
hidden nicht sichtbar
collapse anwendbar auf Tabellenspalten
inherit Sichtbarkeit vom übergeordneten Element erben
Standardwert inherit
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente

Der Wert collapse sollte eine Tabellenspalte komplett ausblenden, als wäre display: none angewendet worden. Allerdings sollte im Gegensatz zu display:none die Tabellenspalte nicht neu berechnet werden. Das setzt allerdings nur Opera und Firefox korrekt um.

Stapelreihenfolge z-index

Mit der Eigenschaft z-index kann man die Stapelreihenfolge bei überlappenden Elementen ändern. Ein Element mit höherem z-index liegt überdeckt das Element mit niedrigerem z-index.

so sieht's aus

Die Eigenschaft z-index wirkt nur in Verbindung mit einer Angabe zu Positon. Statisch positionierte Elemente können sich nicht überlappen. Sie liegen immer unter den positionierten Elementen. Wenn Elemente sich überlappen, werden sie normalerweise in der Reihenfolge angzeigt, nach der sie notiert sind. Mit der Eigenschaft z-index und einer ganzzahligen Wertzuweisung kann man diese Stapelreihenfolge ändern.

Wenn ein Elternelement z-index: auto hat (der Standardwert), kann ein darinliegendes Element mit einem negativen z-index unter dem Elternelement liegen.

siehe Beispiel

siehe auch CSS4you.de

Im folgenden Beispiel bekommt ein Div im Body den z-index: -1; html und body haben eine Hintergrundfarbe. Durch z-index:- 1, liegt das Element zwischen body und html.

so sieht`s aus

z-index
Eigenschaft Wert Bedeutung
z-index Zahl Ganzahl
Standardwert auto
Vererbbar nein
Anwendbar positionierte Elemente

 

Teilweise anzeigen mit clip

Mit der Eigenschaft clip kann man ein Objekt nur innnerhalb eines rechteckigen Ausschnitts anzeigen lassen. Innerhalb von rect() erscheinen 4 Werte. Erlaubt sind positive oder negative Werte, sowie der Wert auto für eine automatische Festlegung. Das Objekt muss mit position: absolute; ausgzeichnet sein. Die Werte werden von den Seiten des Objektes aus gemessen, nicht von den Seiten des Elternelementes. Somit würde folgende Anweisung das komplette Objekt anzeigen:
clip:rect(0px Höhe Breite 0px);

siehe auch CSS4you.de

so sieht's aus

clip

clip
Eigenschaft Wert Bedeutung
clip rect rect(oben rechts unten links)
Standardwert auto
Vererbbar nein
Anwendbar absolute positionierte Elemente

Cursor Anzeige

Man kann mit CSS die Anzeige des Mauszeigers bestimmen. Man bestimmt diese Eigenschaft für ein Element, der Mauszeiger bekommt das Aussehen, sobald er sich über dem Element befindet.

Achtung! Es muss zustätzlich die Eigenschaft overflow:auto gesetzt sein.

so sieht's aus

cursor
Eigenschaft Wert Bedeutung
cursor auto automatische Cursor Einstellung (Standard)
default plattformunabhängiger Standard Cursor
crosshair Fadenkreuz
pointer Handcursor oder Pfeil, wie bei Hyperlinks
move Kreuz mit Pfeilenden. Bewegen eines Elements in alle Richtungen.
n-resize Pfeil nach oben n= North
ne-resize Pfeil nach oben recht ne = North East
e-resize Pfeil nach rechts e = East
ew-resize Pfeil nach rechts und links ew= East West
s-resize Pfeil nach unten s = South
sw-resize Pfeil nach unten links, sw = South West
se-resize Pfeil nach recht, se = South East
nw-resize Pfeil nach oben links nw = North West
text Cursor für Text
wait Wartezustand / Uhr
help Symbol für Hilfe
progress symbolisiert Programmfortschritt, lässt im Gegensatz zu wait eine Interaktion zu
url() Hier hat man die Möglichkeit eine eigene Bilddatei zu hinterlegen. Zusätzlich muss eine Standardangabe für den Cursor eingeben, diese wird mit Komma getrennt hinzugefügt.
cursor:url(cursor.gif), move;
     
Standardwert auto
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente

Es ist nicht nötig die Cursor Anzeige in Zusammehang mit der Eigenschaft resize zu setzen, da der Cursor automatisch das Aussehen einnimmt, sobald man den Eckanfasser berührt, mit dem sich ein Blockelement skalieren lässst.

so sieht's aus

Verschiebbares Element

Mit Javascript kann man Elemente verschieben. Hier bietet sich die Eigenschaft cursor: move an, um das Verhalten zu verdeutlichen.

In diesem Beispiel wurden die Bilder als Hintergrundbilder eingefügt, da das Verschieben nicht so optimal funktioniert, wenn sich in den Div Elementen img Elemente befinden siehe auch das Script des Tipps drag- drop Javascript.
so sieht`s aus

scroll-behavior

Mittels scroll-behavior hat man die Möglichkeit, dass ein Sprungziel auf der Seite nicht sofort angezeigt wird, sondern dass zu diesem Sprungziel gescrollt wird.

siehe auch

html{scroll-behavior: smooth;}

so sieht's aus

Scrollbar gestalten siehe oben.