|
Inhalt: |
CSS - Positionierung
Mit Hilfe von CSS-Anweisungen können Elemente wie Bilder oder Ebenen in einem Browserfenster positioniert werden. Dabei werden die Attribute "id" für ID-Selektoren oder "style" für unmittelbare Anweisungen direkt im Beginn-Tag verwendet.
Für die Eigenschaft "position" sind folgende Möglichkeiten von praktischer Bedeutung:
[1] position:absolute --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen mitbewegt.
[2] position:relative --> die Lage des Elements wird durch die Abstände zum übergeordneten Element bestimmt.
[3] position:fixed --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen nicht mitbewegt. Nicht alle Browser-Versionen verstehen diese CSS-Anweisung.
Die Abstände werden durch folgende Eigenschaften festgelegt:
[1] top: Abstand von oben;
[2] left: Abstand von links
[3] bottom: Abstand von unten;
[4] right: Abstand von rechts;
Die Abstände können in Pixel (px) oder als Prozentzahlen (%) angegeben werden.
Beispiel:
Im Beginn-Tag mit "style":
<div style="position:absolute; left:20px; top:30px; width:120px; height:60px;">;
das gleiche Beispiel mit ID-Selektor (wird als "Ebene" bezeichnet):
<div id="layer1">;
In der CSS-Anweisung:
#layer1 {
position:absolute;
left:20px;
top:30px;
width:120px;
height:60px;
}
d.h. das DIV-Element (Ebene "layer1") mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel wird 200 Pixel und 50 Pixel vom oberen Fensterrand fix positioniert.
|
