mozilla
Ihre Suchergebnisse

    position

    Übersicht

    Die position Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften top, right, bottom oder left verwendet.

    Ein positioniertes Element ist ein Element für das absolute, fixed oder relative als position definiert wurde.
    Ein absolut positioniertes Element ist ein Element für das absolute oder fixed als position definiert wurde.

    • Standardwert static
    • Anwendbar auf Alle Elemente
    • Vererbt Nein
    • Prozentwerte
    • Medium visuell
    • Berechneter Wert siehe Spezifikation
    • Animierbar Nein
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    position: static | relative | absolute | sticky | fixed
    

    Werte

    static
    Standardwert. Das Element ist normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.
    relative
    Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei table-*-group, table-row, table-column, table-cell, und table-caption Elementen ist kein Effekt definiert.
    absolute
    Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.
    sticky
    Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.
    fixed
    Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.
    inherit
    Der Wert des Elternelements wird geerbt.

    Beispiele

    Das folgende Beispiel verdeutlicht den Unterschied zwischen position: absolute und position: fixed. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit fixed positionierte Element fest an seiner Position.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Position absolute und fixed</title>
    <style type="text/css">
    p {font-size:30px; line-height:3em;}
    div.pos {width:49%; text-align:center; border:2px solid #00f;}
    div#abs {position:absolute; bottom:0; left:0;}
    div#fix {position:fixed; bottom:0; right:0;}
    </style>
    </head>
    <body>
      <p>This<br>is<br>some<br>tall,<br>tall,
        <br>tall,<br>tall,<br>tall<br>content.</p>
      <div id="fix" class="pos"><p>Fixed</p></div>
      <div id="abs" class="pos"><p>Absolute</p></div>
    </body>
    </html>
    

    Spezifikation

    Spezifikation Status Anmerkung
    CSS Level 2 (Revision 1) Recommendation  
    CSS Positioned Layout Module Level 3 Working Draft sticky hinzugefügt

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 1.0 (1.0) (See notes) 4.0 4.0 1.0 (85)
    fixed 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
    sticky ? Nightly build (Bug 916315) ? ? 6.1 -webkit-
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 1.0 (1.0) (See notes) ? ? ?

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: facial, SJW, Michael2402, fscholz
    Zuletzt aktualisiert von: SJW,
    Seitenleiste ausblenden