Absolute Positionierung
Bei der Absoluter Positionierung geht es, wie man ahnen kann, darum etwas absolut zu Positionieren. D.h so zu positionieren, dass ein bestimmten Abstand zum Rand des Browsers vorherscht.
Beispiel für Absolute Positionierung von zwei Divs
<!doctype html>
<html>
<head>
<title>
Erste Seite
</title>
<style type="text/css">
#bier{border: 2px solid blue;
position:absolute;
width: 150px;
height: 50px;
top:50px;
left:20px;
}
#tutorials{border: 2px solid red;
position:absolute;
width: 230px;
height: 50px;
top:150px;
left:20px;
}
</style>
</head>
<body>
<div id="bier">Hier gibts Bier</div>
<div id="tutorials">Hier gibts Tutorials</div>
</table>
</body>
</html>
In diesem Beispiel habe ich zwei Divs und zwei Klassen mit Gesetzen erstellt. Man erkennt, dass diese Divs absolut positioniert sind, an der Zeile: position:absolute;.
Obwohl die absolute Positionierung eine super Möglichkeit ist, seine Inhalte so zu platzieren wie man es gerne möchte, so ist es dennoch riskant, da es passieren kann, dass die Inhalte sich überschneiden können und dadurch schwer oder gar nicht lesbar werden.
Die beiden Divs im Beispielcode sind so platziert, dass sie sich nicht überschneiden. Probiert doch einfach mal ein paar Werte für width, height, top und left aus. Dann seht ihr was ich meine.
Im nächsten Tutorial geht es dann um die Relative Positionierung.