CSS III: Layer und Positionierung
Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/976715560.shtml
Mit Style Sheets wird endlich der Traum des pixelgenauen Layouts wahr. In Teil 3 zeigen wir nun, wie sich Elemente positionieren lassen. Für Anfänger ist der erste Teil unserer Reihe empfehlenswert, um einen Überblick über CSS zu gewinnen.
Layer
Zusammen mit CSS kam das neue Tag <div>, das einen Layer bzw. eine Ebene definiert, also einen vom Rest der Seite abgegrenzten Bereich. Dieses Tag sollte grundsätzlich verwendet werden, um Elemente mit CSS genau auszurichten.
Beispiel:
<div>
Diese Tabelle wird jetzt ausgerichtet
<table><tr><td>ausgerichtet</td></tr></table>
</div>
Arten der Positionierung
Es gibt verschiedene Arten der Positionierung. Die Bedeutung der Werte für position:
absolute: absolut, scrollbar
fixed: absolut, nicht scrollbar
relative: relativ, ausgehend vom letzten Element
static: der Normalzustand
Beispiel:
<div style="position:absolute;">
Text
</div>
Breite/Höhe
Um Objekte genau definierter Größe verwenden zu können, gibt es die Attribute height (Höhe) und width (Breite).
<div style="height: 20px; width: 100px;">
Text
</div>
Positionierung
Elemente werden positioniert, indem man ihren Abstand zu einem der Ränder des Browserfensters angibt. Dafür sind die Attribute top (vom oberen Rand), left (vom linken Rand), right (vom rechten Rand) und bottom (vom unteren Rand) vorgesehen.
Beachten Sie, dass normalerweise nur left und top verwendet werden.
<div style="position:absolute; left: 20px; top:300px;">
Text
</div>
Sichtbarkeit
Mit CSS ist es möglich, ein Objekt als "unsichtbar" zu markieren. Verwenden Sie dafür das Attribut visibility. Erlaubt sind hier die Werte visible und hidden.
<div style="visibility:hidden;">
Versteckter Text
</div>
Überlappende Elemente
Selbstverständlich können einzelne Elemente bzw. Layer sich überlappen, also über- oder untereinander liegen. Um zu steuern, welche Elemente ganz oben bzw. unten liegen, gibt es das Attribut z-index. Erlaubt sind numerische Werte, je höher der Wert, desto weiter liegt das Objekt oben.
<div style="z-index: 1;">
Text
</div>