• P
    • Position

    Position und Ausrichtung

    Mit Hilfe der folgenden Befehle werden in CSS die Position von Elementen und deren Rahmen und Ränder definiert. Jedes Element besteht aus der Elementgröße (~ flächenmäßige Ausdehnung) und dem Inhalt (z.B. Text).

     

     

    Beispiel - CSS Ausrichtung: margin, padding

    Rand (Margin / Transparent)
    Rahmen(Border)
    Polsterung (Padding)
    Inhalt (Content)

    Elementgröße

    Die Elementgröße wird in CSS durch width und height definiert.

     

     

    Beispiel - Elementbreite – Block-level

    width: Längenangabe| Prozentwert | auto

    Beispiel - Elementhöhe – Block-level

    height: Längenangabe| Prozentwert | auto

    Bei width und height kann auch ein minimaler bzw. maximaler Wert definiert werden, so dass man unabhängig von der Schriftgröße, Bildgrößen oder des Inhalts ein Grundlayout definieren kann: min-width, max-width, min-height, max-height.

    Elementposition

    Mit Hilfe von margin (Abstand eines Elements von einem anderen Element) und padding (Abstand des Inhaltes innerhalb eines Elements von dem Elementrand) kann in CSS die Position eines Elementes festgelegt werden.

     

     

    Beispiel - Abstand eines Elementes von einem anderen Element

    margin: Längenangabe | Prozentwert | auto

    Beispiel - Abstand des Inhaltes innerhalb eines Elements von dem Elementrand

    padding: Längenangabe | Prozentwert | auto

    Bei padding und margin können die Abstände von dem oberen, rechten, unteren und/oder linken Rand definiert werden. Zusätzlich können die Abstände nach oben, rechts, unten und links über das direkte Ansprechen der Position definiert werden:

    padding/margin-top,
    padding/margin-right,
    padding/margin-bottom,
    padding/margin-left

    Hierbei sind sowohl positive als auch negative Werte möglich.

     

     

    Beispiel - Größen- und Positionsdefinition eines Elementes

    p {
    width: 300px;
    margin: 15px 20px 25px 30px;
    padding-top: 20pt;
    }

    Die Werte können auch nur für einzelne Abstände definiert werden, z.B.:

     

     

    Beispiel - Größen- und Positionsdefinition eines Elementes

    p {
    margin-top: 15px;
    marign-bottom: 25px;
    }

    Ausgangspunkt bei der Elementpositionierung

    Mit Hilfe von position: xxx wird in CSS festgelegt, was den Ausgangspunkt für die Positionierung eines Elements darstellt.

     

     

    Wertebereich von position

    static: Standardwert, bei dem die Box nach dem gewöhnlichen Fluss ausgerichtet wird.

    relative: Das Element wird zu Ihrem Bezugspunkt (vorher stehendes Element) verschoben. Das nachfolgende Element wird so positioniert, als ob dieses Element nicht verschoben wird.

    absolute: Das Element wird relativ zu dem umschließenden Element verschoben.

    fixed: Das Element wird absolut positioniert und feststehend (d.h. auch beim Scrollen bleibt das Element auf der definierten Position).

    Inherit: Die Definition des Elternelements wird Übernommen.

    Bei den Positionswerten relative, absolute und fixed kann die Position eines Elements verändert werden.

    Dies erfolgt durch top, right, bottom, left: | <prozentwert> | static-position | auto |, wobei sich die Prozentangaben auf bei left und right auf die Breite, bei bottom und top auf die Höhe des Elternelements beziehen. Mit Hilfe von static position behält das Element die Position, an der das übergeordnete Element ist.