Elemente Positionieren mit CSS [PDF | 202KB]

CSS – Positionieren von Elementen [Josef Hofer, KS Linz] Seite 1/3
Elemente mit CSS positionieren
(Stand: CSS 2.1/3.0)
CSS wird zum Formatieren von (X)HTML-Elementen eingesetzt und auch zum Positionieren
dieser. Frames und Tabellen sind traditionelle Werkzeuge dafür, jedoch verlieren sie aus
verschiedensten Gründen an Bedeutung. Zukünftig soll vor allem mit CSS -Individualformaten
bzw. CSS-Container positioniert werden.
Das Boxmodell und Größenangaben von Elementen
Aus der Sicht von CSS ist fast jedes XHTML-Element als
rechteckiger Kasten zu betrachten.
Die Gesamtbreite eines Elements (-höhe) ergibt sich allerdings
aus der Breite bzw. Höhe (width, height) des Inhalts, des
Innenabstandes (padding), der Rahmendicke (border)und des
Außenabstands (margin).
border, margin, padding gelten alleinstehend rund um das
angegebene Element, jedoch können die Abstände auch
einzeln angegeben werden (-top, -bottom, -left, -right)
Elemente positionieren
Elemente können in ihrer Position am Bildschirm beeinflusst werden: Mit der CSS-Eigenschaft
position und den Attributen static (Default), relative, absolute, fixed.
Die Eigenschaften top, right, bottom und left geben die Abstände eines Elements relativ zu
anderen Elementen bzw. dem inneren Fensterrand an. In verschiedenen Browsern testen!
position: static
Wenn Elemente statisch deklariert sind,
erscheinen sie in der Reihenfolge, in der
sie angegeben wurden. Das Attribut
static ist der Default-Wert
(braucht also nicht angegeben werden).
position: relative
Die Elemente werden relativ zu ihrer
ursprünglichen Position mit einer
Abstandsangabe (top, bottom, right,
left) verschoben. Logischerweise können
#kasten1 {position: static;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
border: 2px solid #000000;}
#kasten01 {position: static;
margin: 5px; padding: 5px;
border: 2px dashed #880000;}
#kasten2 {position: static;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
background-color: #DDDDDD;}
kasten1
kasten01
kasten2
#kasten1 {position: static;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
border: 2px solid #000000;}

CSS – Positionieren von Elementen [Josef Hofer, KS Linz] Seite 2/3
nicht zugleich Werte für top, bottum oder
right und left angegeben werden.
Negative Wertangaben sind möglich.
#kasten01 {position: static;
margin: 5px; padding: 5px;
border: 2px dashed #880000;}
#kasten2 {position: relative;
top: -60px; left: 50px;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
background-color: #DDDDDD;}
kasten1
kasten01
kasten2
Ein mit relative positioniertes Element hat Einfluss auf nachfolgende Elemente, deren
Ursprungsposition dort liegt, so sie auch ohne Verschiebung des Vorgängers liegen würde.
Inline-Elemente (a, img) können mit display:block zu Blockelementen gemacht werden (wichtig
für DHTML).
left: 50px – verschiebt die um 50 px nach rechts, right: 50px – 50 px nach links
position: absolute
Absolut positionierte Elemente haben ihren
Bezugspunkt in der linken oberen Ecke
ihres Elternelements, ist das der body,
dann in am Beginn des Anzeigefensters.
position: fixed
Fixierte Elemente nehmen immer Bezug
zur linken oberen Ecke des Anzeigefensters
und bewegen sich nicht, wenn das
Fenster gescrollt wird.
#kasten1 {position: absolute;
top: 250px; left: 150px;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
border: 2px solid #000000;}
#kasten01 {position: absolute;
top: 50px;
margin: 5px; padding: 5px;
border: 2px dashed #880000;}
#kasten2 {position: static;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
background-color: #DDDDDD;}
#kasten3 {position: static;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
border: 2px solid #000000;}
kasten1
kasten01
kasten2
kasten3
#logo {position: fixed;
top: 10px; left: 330px;
width: 60px;
margin: 5px; padding: 5px;

CSS – Positionieren von Elementen [Josef Hofer, KS Linz] Seite 3/3
z-index:
Beim Positionieren kann man die
Darstellungsreihenfolgen von Elementen
die sich überlappen regeln – je höher der
z-index (Ganzzahl), desto weiter im
Vordergrund liegt die Ebene.
Hier wird der kasten3 in den Vordergrund
gebracht.
float / clear:
Mit float kann ich festlegen, wie
nachfolgende Elemente im Verhältnis zum
aktuellen positioniert werden sollen.
float:left – Element ist links
positioniert, nachfolgende rechts davon.
Mit clear kann das float des
vorhergehenden Elements aufgehoben
werden (left/right/both)
border: 2px solid #0000AA;
background-color:#DEDEDE;
font-size:30px; }
#content {position: static;
top:10px; width: 300px;
margin: 5px; padding: 5px;
border: 2px dashed #880000;}
NFX
Viel Text. ...
#kasten2 {position: absolute;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
top:10px; left:10px;
border: 2px solid #000000;
z-index:1; }
#kasten3 {position: absolute;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
top:50px; left:50px;
border: 2px solid #000000;
z-index:3; }
#kasten4 {position: absolute;
margin: 5px; padding: 5px;
width: 200px; height: 100px;
top:100px; left:100px;
border: 2px solid #000000;
background-color:#DEDEDE;
z-index:2; }
kasten2
kasten3
kasten4
#kasten1 {width: 100px; height: 100px;
background-color: #DEDEDE;
float: left; }
#kasten2 {width: 100px; height: 100px;
background-color: #999999;
float: left; }
#kasten3 {width: 100px; height: 100px;
background-color: #555555;
clear: left; }
kasten1
kasten2
kasten3