diedVIPs

html knowhow

Befehle zur Positionierung von Elementen









Befehle zur Positionierung von Elementen

Mit der CSS-Eigenschaft „position“ wird die Art und Weise definiert, mit der HTML-Elemente auf einer Webseite positioniert werden. Dabei sind folgende Werte möglich:
static: in Abhängigkeit der Reihenfolge im HTML-Dokument (Standard)
relative: relativ zur eigentlichen Position
fixed: relativ zum sichtbaren Bereich des Browsers
absolute: relativ zum nächsten übergeordneten Element, das nicht mit „static“ positioniert ist.

Für die eigentliche Positionierung werden dann die folgenden CSS-Eigenschaften verwendet:
top
right
bottom
left

Der Befehl "position" entfernt Elemente aus dem normalen Elementfluss und positioniert sie an jede beliebige Stelle (auch außerhalb) des Viewports.


display
Befehle Beschreibung Wert Beispiele
<position> Die Eigenschaft position entfernt Elemente aus dem normalen Elementfluss und positioniert sie an jede beliebige Stelle (auch außerhalb) des Viewports.
absolute = losgelöst vom Textfluss, an eine Stelle, die per left, right, top und bottom festgelegt wird.
fixed = starr am Viewport ausgerichtet, mit left, right, top und bottom festgelegt
relative = Bezugspunkt für absolut positionierte Kindelemente
  table { position: absolute; right: 5em; top: 2em; }
absolute Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert.
=> losgelöst vom Textfluss
  #child1 {position: absolute; border: 1px solid red; top: 70px; right: 15px; }
<right> Abstand nach rechts auto, %, länge  
<top> Die Eigenschaft top legt die obere Position positionierter Elemente fest.
ein numerisches Längenmaß wie 4.5cm oder 300px
eine Prozentangabe = bezieht sich auf die Höhe des umschließenden Blocks. Negative Werte sind erlaubt.
auto = Voreinstellung, keine besondere Startposition
inherit = erbt die entsprechende Angabe des Elternelements
  aside { position: absolute; right: 5em; top:2em; }
<bottom> Abstand nach unten  auto, %, länge  
<left> Abstand nach links  auto, %, länge  
<overflow> overflow  visible, , hidden, scroll, auto  
<vertical-align> Vertikale Ausrichtung
auto, %, länge, baseline, sub, super, top, text-top, middle, bottom, text-bottom  
<z-index> Stapelreihenfolge auto, zahl  
       
static Standardwert. Elemente werden in der Reihenfolge gerendert, wie sie im Dokumentenfluss erscheinen
=> Element verbleibt im Textfluss
  #parent1 {position: static; border: 1px solid blue; width: 300px; height: 100px;}
fixed Das Element wird relativ zum Browserfenster positioniert.
=> starr am Viewport ausgerichtet
  #parent4 {position: fixed; border: 1px solid blue; background-color: rgba(255,200,200,0.5);  width: 300px; height: 100px;}
relative Das Element wird relativ zu seiner normalen Position positioniert, also fügt 'left:20px' 20 Pixel zur LINKEN Position des Elements hinzu.
=> absolut positionierte Kindelemente
  #parent2 {position: relative; border: 1px solid blue; width: 300px; height: 100px;}
sticky Das Element wird basierend auf der Scroll-Position des Benutzers positioniert. Ein Sticky-Element wechselt je nach Scroll-Position zwischen relativ und fest. Es wird relativ positioniert, bis eine vorgegebene Versatzposition im Ansichtsfenster erreicht wird.
=> behält Position im Elementfluss
   
initial Setzt diese Eigenschaft auf ihren Standardwert.
=> Vererbung steuernde Werte
   
inherit Erbt diese Eigenschaft von seinem übergeordneten Element.
=> Vererbung steuernde Werte
   







Kontakt    Datenschutz    Impressum