Veit Schiele Communications

Veit Schiele Communications

Positionierung und Floats

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:11 © Veit Schiele Communications GmbH, 2007–2017
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.

Der IE7 interpretiert leider fixed nicht korrekt.

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

verhält sich wie position: relative innerhalb des Elternelements sofern es keinen Offset im Viewport gibt; dann verhält es sich entsprechend position: fixed.

Wird aktuell nur unterstützt von Chrome 23.0.1247.+ und den Nightly Builds von WebKit.

Für die Werte absolute, fixed, relative und sticky 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.