HTML Positionierung

position

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.

z-index

Position des Elements auf der Z-Achse (Tiefenachse)

auto

index

inherit

Ohne Auswirkung, wenn position:static aktiv.

top, bottom, right, left

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.

display

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)

float, clear

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)

margin(-top,-bottom,-left,-right)

äußerer Abstand/Rand eines Elements

numerisch

auto

inherit

padding(-top,-bottom,-left,-right)

Abstand des Inhalts zum Rand des Elements

numerisch

auto

inherit

vertical-align

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

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)

Artikel Info
Beschreibung	Wie werden HTML Elemente positioniert (über CSS)
Stand	Überprüfen
Version	13.1101
Kategorien