Mit CSS Elemente positionieren

April 2015
Mit Stylesheets lassen Text und Bilder aufs Pixel genau positionieren, nämlich mit den Tags <SPAN> und <DIV>.
Dies ist in der Version 4 von Netscape und Internet Explorer möglich, allerdings bleibt diese Technik problematisch und kann zu Kompatibilitätsproblemen führen.

Relative und absolute Positionierung

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.

Positionieren von Text

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>

Positionieren eines Bildes

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.

Elemente übereinander legen

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.

Laden Sie sich den Artikel kostenlos als PDF-Datei herunter, um ihn jeder Zeit Offline lesen zu können:
Mit-css-elemente-positionieren.pdf

Das könnte Sie auch interessieren


Positioning elements in CSS
Positioning elements in CSS
Posicionamiento de los elementos en CSS
Posicionamiento de los elementos en CSS
Positionner des éléments grâce aux CSS
Positionner des éléments grâce aux CSS
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
Posicionar elementos graças ao CSS
Posicionar elementos graças ao CSS
Das Dokument mit dem Titel « Mit CSS Elemente positionieren » aus Kioskea (de.kioskea.net) wird zur Verfügung gestellt unter den Bedingungen der Creative Commons Lizenz. Sie dürfen das Dokument verwenden, verändern sowie Vervielfältigungen dieser Seite erstellen, unter den Bedingungen, die in der vorgenannten Lizenz erwähnt sind und unter der gleichzeitigen Bedingung, dass Sie im Rahmen Ihrer Verwendung, Veränderung oder Vervielfältigung nach außen hin klar und deutlich auf den Urheber (= de.kioskea.net) des Dokuments hinweisen.