Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		Vorhergehende Überarbeitung
anleitung:web:html_css:positionierung [09.02.2021 06:37] – ↷ Seite von anleitung:web:html_css:positionierung nach anleitung:web:html_css_bereich:positionierung verschoben J. Huberanleitung:web:html_css:positionierung [09.02.2021 06:54] (aktuell) – J. Huber
Zeile 1: Zeile 1:
 +====== 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 <[[http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-li|li]] >)
 +    * marker(Aufzählungszeichen)
 +    * none(nicht dargestellt, unsichtbar)
 +    * run-in(je nach Kontext als Inline- bzw. Blockelement)
 +    * table(Tabelle, wie <[[http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-table|table]] >)
 +    * table-caption(Tabellenbeschriftung, wie <[[http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-caption|caption]] >)
 +    * table-cell(Tabellenzelle, wie <[[http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-td|td]] >)
 +    * table-column(Tabellenspalte)
 +    * table-column-group(Spaltengruppe, wie <[[http://webkompetenz.wikidot.com/html-handbuch:html-elementreferenz-colgroup|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)
 +
 +---- struct data ----
 +artikelinfo.name     : HTML Positionierung
 +artikelinfo.beschreibung : Wie werden HTML Elemente positioniert (über CSS)
 +artikelinfo.status   : Überprüfen
 +artikelinfo.statuslink : Überprüfen|Überprüfen
 +artikelinfo.version  : 2013-11-01
 +artikelinfo.cats     : Anleitung
 +artikelinfo.catlinks : Anleitung|Anleitung
 +artikelinfo.prg      : 
 +----