Die absolute Positionierung {position: absolute} wird durch den Bezug auf das äußere linke Eck des Browsers bestimmt. Die Koordinaten eines Punkts werden also von oben nach unten (top) und links nach rechts (left) angegeben.
Die relative Position bezieht sich auf andere Elemente, wie ein Bild, das heißt, Elemente, die sich in einem dieser Tags befinden DIV oder SPAN werden im Anschluss an die HTML-Elemente positioniert, hinter denen sie sich befinden.
 |
Zum Positionieren des Texts "Wie geht das?" 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken :
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;">
Wie geht das? </SPAN> </BODY> </HTML>
Man kann dafür auch anders vorgehen, zum Beispiel so :
<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Wie geht das?
</DIV>
</BODY>
</HTML>
Zum Positionieren des Bildes "test.jpg" 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken :
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> </BODY> </HTML>
Es ist wichtig, die Größe des Bildes bei den Stylesheets zu spezifizieren, da es sonst zu Kompatibilitätsproblemen bei Browsern kommen kann.
Legen wir nun den Text "Wie geht das?" über das Bild "test.jpg":
<HTML> <BODY> <SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> <SPAN style="position: absolute; top: 50 px; left: 100 px;"> Wie geht das? </SPAN> </BODY> </HTML>
Dadurch lassen sich Textelemente und Bilder übereinander legen.
