Positionieren

Positionierung Selfhtml

Position

position

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

Das Beispiel aus Selfhtml veranschaulicht die Werte

siehe auch dieses Beispiel

position
Eigenschaft Wert Bedeutung
Standardwert static
Vererbbar nein
Anwendbar Alle Elemente
position static das Element positioniert sich im Textfluss
relative relative die Abweichung des Elements vom Textfluss
absolute Positionierung in Bezug zum letzten Vorfahren mit relativer Positionierung oder zum body Element.
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.

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 es in ein Element mit position: relative platziert. Dieses Elternelement bekommt margin: auto, um es mittig zu platzieren.
so sieht's aus

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.
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
Standardwert auto
Vererbbar nein
Anwendbar Blockelemente , Inline-Blockelemente
width: Breite

Zahlenangaben Maßeinheit

prozentual relativ zur Breite des Elternelements

auto = automatische Festlegung

height: Höhe

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
Standardwert visible
Vererbbar nein
Anwendbar Alle Block-Elemente
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
scroll horizontale und vertikale Scrollbalken werden eingeblendet

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
Standardwert none
Vererbbar nein
Anwendbar Alle Block-Elemente
resize none nicht skalierbar
both in Breite und Höhe skalierbar
horizontal horizontal sklaierbar
vertical vertikal skalierbar

 

Element umfließen

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.

so sieht's aus In diesem Beispiel werden gleichgroße Div- Elemente nebeneinander angeordnet, sofern genug Platz vorhanden ist. Verkleinern Sie das Browserfenster, um das Verhalten zu sehen.

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.

Es ist wichtig zu verstehen, dass gefloatete Elemente ähnlich wie absolut positionierte Elemente aus dem normalen Textfluss herausfallen.

so sieht's aus

weiteres Beispiel

float
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente
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

clear

Um den normalen Textfluss wiederherzustellen verwendet man clear. Das erste Element welches die Höhe des Floats berücksichtigt, wird darunter angezeigt, wenn man ihm die Eigenschaft clear mit entsprechenden Wert zuweist.

so sieht's aus

Es ist kein Problem diesem Element die Eigenschaft float zuzuweisen, so dass der nachfolgende Inhalt das Element umfließt.

Easy Clearing

Um das Floaten zu beenden, wird ein Element benötigt, welches mit clear:both versehen wird. Wenn man jedoch kein HTML Element für diesen Zweck erzeugen will, gibt es einen Trick, der als Easy Clearing bekannt geworden ist. Mit dem Pseudoelement :after wird ein Element erzeugt, welches mit clear:both versehen wird. Damit es keine weiteren sichtbaren Auswirkungen zeigt, setzt man noch die Höhe auf 0 und macht es unsichtbar. Es ist wichtig zu verstehen, dass ein solches Element sich innerhalb des Blockelements befindet, welches mit :after versehen wurde.

.clearfix:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0;
	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
Standardwert inherit
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente
visibility visible sichtbar
hidden nicht sichtbar
collapse anwendbar auf Tabellenspalten
inherit Sichtbarkeit vom übergeordneten Element erben

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.

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.

Hat man Elemente ineinander verschachtel und dabei die Elternelemente mit z-index versehen, so können die Kindelemente in einem Elternelement mit niedrigerem z-index, nicht über Elementen die sich im Elternelement mit höherem z-index befinden angezeigt werden.

siehe auch CSS4you.de

so sieht's aus

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

 

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
Standardwert auto
Vererbbar nein
Anwendbar absolute positionierte Elemente
clip rect rect(oben rechts unten links)

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
Standardwert auto
Vererbbar nein
Anwendbar Alle bis auf absolut positionierte Elemente
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;
     

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 Element verschieben. Hier bietet es sich an, die Eigenschaft cursor: move zu setzen. Hier ein deutsches Tutorial zum Thema Elemente mit Javascript verschieben.

so sieht's aus
so sieht`s aus

Scroll

Mittels scroll 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