Wenn das Definieren von Abständen alleine nicht ausreicht, um Ihren Ansprüchen gerecht zu werden, dann finden wir in diesem Kapitel vermutlich Ihr erforderliches Werkzeug.
Absolute Positionierung
Um unsere Elemente nun an einer präzisen Stelle im HTML-Dokument anzeigen zu lassen, müssen wir uns mehrerer verschiedener Propertys bedienen. Zum einen müssen wir dem Browser mitteilen, dass er auf die standardmäßige Ausrichtung verzichten und direkt unsere Angaben als Startpunkt verwenden soll. Als nächstes müssen wir in Form von „Koordinaten“ den Punkt bestimmen, an dem das gewünschte Element erscheinen soll. Das sieht zum Beispiel so aus:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
#header1 {
Position: absolute;
Top: 20px;
Left: 500px;
}
#text1 {
Position: absolute;
Top: 450px;
Left: 90px;
}
</style>
</head>
<body>
<h1 id=“header1″>Ich bin eine Überschrift</h1>
<p id=“text1″>Ich bin der erste Absatz.</p>
</body>
</html>
Wie vermutlich nicht entgangen ist, handelt es sich bei den „Koordinaten“ jeweils um den Anfangspunkt, also um den Pixel, an dem das Element beginnen soll (sprich links oben des ersten Buchstabens). Da in den meisten Fällen keine Überlappung von verschiedenen Elementen gewünscht ist, macht es Sinn eine absolut definierte Position nur für dieses eine Element frei zu halten. Daher sind die Positionsangaben hier mit ID-Selektoren zugewiesen.
Dies ist die präziseste Möglichkeit, Elemente per CSS zu positionieren. Leider kommt dieses Werkzeug nicht ganz ohne Tücken. Vor allem bei der Gestaltung von handytauglichen Websites sind absolut positionierte Elemente unschön anzusehen und können oft sogar aus dem sichtbaren Bereich verschwinden. Diese Methode ist also mit Vorsicht zu genießen.