________________________
Postionierung von Elementen
________________________
Seit CSS 2.0 kann man Elemente über verschiedene Eigenschaften im Anzeigefenster exkat positionieren und die Position zueinander kontrollieren. Dafür nutzt man Angaben zur relativen bzw. absoluten Position, zur Ausdehnung und zum Überlappen, Umfließen oder Anzeigen der Elemente.
So lassen sich Elemente bewegen, ein-/ausblenden, anders überlappen usw.
Positionsart - position
absolute = absolute Positionierung - Rand des Elternelements - Scrollt mit
relative = relative Positionierung - abhängig von der Normalposition oder Anfangsposition des Elements
static = keine spezielle Positionierung (Normaleinstellung)
fixed = absolute Positionierung - Rand des Elternelements - bleibt stehen (wird von Netscape und IE nicht interpretiert)
Die wichtigsten Positionsarten sind dabei "absolute" und "relative".
Gibt es kein anderes Eltern-Element so ist <body> das Elternelement.
"position:" allen reicht aber nicht zum positionieren, Angaben über den Abstand von oben ("top") und ("links") sind dafür noch nötig.
Bsp.:
"position: relative; top:10px;" legt fest, dass das Element 10 Pixel tiefer liegt als normal
"position: absolute; top:10px;" legt fest, dass das Element 10 Pixel unterhalb des Randes seines Elternelements liegt
Wichtig:
Netscape und IE interpretieren die Angaben der absoluten Positionierung nicht in allen Elemente, deshalb ist es sinnvoll entsprechende zu positionierende Elemente in <div>-Tags einzuschließen und diese zu positionieren.
Damit das Element nicht über den Seitenrand verschoben wird ist es sinnvoll eine Angabe zu Breite mit "width" zu machen.
Mögliche Startpositionen:
ab Browser 4.0
top: - von oben
left: - von links
ab Brwoser 5.0
bottom: von unten
rigth: von rechts
Weitere Eigenschaften:
width: - Breite
height: - Höhe
min-width: - minimale Breite
max-width: - maximale Breite
min-height: - minimale Höhe
max-height: - maximale Höhe
overflow: - Verhalten bei Übergroßen Inhalten
direction: - Schreibrichtung
float: - Textumfluss
clear: - Fortsetzung bei Textumfluss
z-index: - Schichtpostion, wenn überlappend
overflow-Werte:
visible = Element wird ausgedehnt bis sein Inhalt komplett sichtbar ist
hidden = Element wird abgeschnitten wenn Inhalt länger als Element
scroll = Element wird abgeschnitten wenn Inhalt länger als Element, Scroll-Leisten werden eingeblendet
auto = Browser entscheidet, wie Element angezeigt wird, Anbieten von Scroll-Leisten ist erlaubt
directon-Werte:
ltr = von links nach rechts (ähnlich align=left)
rtl = von rechts nach links (ähnlich align=right)
float-Werte:
left = Element links, wird rechts von nachfolgenden Elementen umflossen
right = Element rechts, wird links von nachfolgenden Elementen umflossen
none = Kein Umfluss (Normaleinstellung)
!wenn float-Angabe, dann width-Angabe!
clear-Werte:
left = Erzwingt bei float:left die Fortsetzung unterhalb
right = Erzwingt bei float:right die Fortsetzung unterhalb
both = Erzwingt in jedem Fall die Fortsetzung unterhalb
none = Erzwingt keine Fortsetzung unterhalb (Normaleinstellung)
z-index:
je höher die Zahl, desto weiter vorn/oben das Element