Veit Schiele Communications

Veit Schiele Communications

Positionierung und Floats

erstellt von Veit Schielezuletzt verändert: 09.06.2011 14:01 Uhr © Veit Schiele 2007–2011
Artikelaktionen
Element {position: Wert; ... }

Für Wert einen der folgenden Werte notieren:

static
die Standardeinstellung für position.
absolute

absolute Positionierung, gemessen am Rand des Elternelements,

scrollbar.

fixed

absolute Positionierung, gemessen am Rand des Elternelements,

bleibt beim Scrollen stehen.

relative
relative Positionierung, gemessen an der element-eigenen Normalposition.

Der MS Internet Explorer unterstützt leider nicht fixed. fixed.js ist ein Javascript, das dieses Problem zu umgehen und Emulating Fixed Positoning gibt Hinweise, wie das Problem umgangen werden kann.

Für die Werte absolute, fixed und relative gibt es vier zusätzliche Abstands-Eigenschaften: top, right, bottom und left.

Breite und Höhe

Breite und Höhe kann mit width und height festgelegt werden.

Mindest- und Höchstwerte lassen sich mit min-width, min-height, max-width und max-height angeben. Leider unterstützt der Internet-Explorer diese Angaben nicht; unter minimax.js finden Sie jedoch ein Javsscript, das dieses Problem behebt.

Umfließen

float regelt, wie Text das Objekt umfließt:

Element {float: left | right | none | inherit}

Dabei kann mit negativen Außenabständen das Objekt (z.B. ein Bild, auch aus dem Textblock herausragen.

clear gibt an, wie Umfließen verhindert werden soll:

Element {clear: left | right | both | inherit}

Überlauf und Beschneidungen

Sind Elemente aufgrund einer festen Größe zu klein für ihren Inhalt, gibt die Eigenschaft overflow an, wie der Inhalt dargestellt werden soll:

Element {overflow: visible | hidden | scroll | auto | inherit;}

Hat overflow den Wert hidden', kann mit der Eigenschaft clip angegeben werden, wie groß der Beschneidungsbereich sein soll:

Element {clip: rect(oben, rechts, unten, links) | auto | inherit}

z-Achse

Die z-Achse gib an, welches Element optisch über einem anderen Element erscheint:

Element {z-index: integer | auto | inherit}

Je höher der Wert eines Elements für den z-index, desto »näher« erscheint das Element.

Artikelaktionen