HTML Positionierung

• static
  • Standard
  • Das Element ist nicht positioniert, sondern liegt im normalen Textfluß.
  • Die Eigenschaften top, right, bottom, left und z-index werden ignoriert.
• absolute
  * Das Element wird relativ zum beinhaltenden Block (gemessen am Rand des nächsthöheren Vorfahrenelements, das nichtdie Normaleinstellung position:static aufweist) positioniert.
  • Es ist nicht mehr im Textfluss enthalten und beeinflußt die Darstellung der restlichen Elemente nicht.
• fixed
  
  • Das Element wird relativ zum Browser-Fenster positioniert
  • Es bleibt auch beim Rollen an derselben Stelle stehen,
    beim Ausdruck wird es auf jeder Seite wiederholt.
  • Es ist nicht mehr im Textfluss enthalten und beeinflußt die Darstellung der restlichen Elemente nicht.
• inherit
  
  • vom Elternelement geerbt
• relative
  
  • Das Element wird relativ zum beinhaltenden Block positioniert.
  • Es ist im Textfluss enthalten und beeinflußt die Darstellung der restlichen Elemente.
  • Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente erhalten.

Position des Elements auf der Z-Achse (Tiefenachse)

• auto
• index
• inherit

Ohne Auswirkung, wenn position:static aktiv.

Abstand zwischen dem oberen, unteren, rechten bzw. linken Rand des Elements und dem oberen, unteren, rechten bzw. linken Rand des umgebenden (Eltern-) Elements festlegen.

Erlaubte Werte ist ein numerische Werte mit einer der Maßeinheiten px, em, ex, %, in, cm, mm, pt, pc

Ohne Auswirkung, wenn position:static aktiv.

Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen.

• block(Blockelement)
• compact()
• inherit(vom Elternelement geerbt)
• inline (Inline-Element)
• inline-table(Tabelle, als Inline-Element)
• list-item(Listeintrag, wie <li >)
• marker(Aufzählungszeichen)
• none(nicht dargestellt, unsichtbar)
• run-in(je nach Kontext als Inline- bzw. Blockelement)
• table(Tabelle, wie <table >)
• table-caption(Tabellenbeschriftung, wie <caption >)
• table-cell(Tabellenzelle, wie <td >)
• table-column(Tabellenspalte)
• table-column-group(Spaltengruppe, wie <colgroup >)
• table-footer-group(gruppierte Tabellenfusszeile)
• table-header-group(gruppierte Tabellenkopfzeile)
• table-row(Tabellenzeile)
• table-row-group(gruppierte Tabellenzeile)

Festlegen des Textflusses; definiert ob Elemente einander umfließen können

clear deaktiviert die float-Eigenschaft an der angegebenen Seite

• inherit(vom Elternelement geerbt)
• left(Das Element steht links und wird rechts umflossen)
• none(Umfließen ist deaktiviert)
• right(Das Element steht rechts und wird links umflossen)

äußerer Abstand/Rand eines Elements

• numerisch
• auto
• inherit

Abstand des Inhalts zum Rand des Elements

• numerisch
• auto
• inherit

Vertikale Ausrichtung des Inhalts.

• numerisch
• baseline(am unteren Rand der Schrift)
• bottom(am unteren Rand des Elements)
• inherit(vom Elternelement geerbt)
• middle(in der Mitter des Elements)
• sub(tiefgestellt)
• super(hochgestellt)
• text-bottom(am unteren Rand der Unterlänge)
• text-top(am oberen Rand der Schrift)
• top(am oberen Rand des Elements)

text-align bezieht sich auf Textinhalte und alle inline dargestellten Elemente. (alle NICHT Block bildenden Elemente)

• center(zentriert)
• inherit(vom Elternelement geerbt)
• justify(Blocksatz)
• left(linksbündig)
• right(rechtsbündig)