Mit CSS Elemente positionieren

Stellen Sie Ihre Frage
Mit CSS-Stylesheets lassen sich Texte und Bilder in Webeiten pixelgenau positionieren, nämlich mit den Tags <SPAN> und <DIV>. Allerdings hat diese Technik zu Kompatibilitätsproblemen führen.


Relative und absolute Positionierung

Die absolute Positionierung (position: absolute) wird durch den Bezug zur äußeren linken Ecke des Browsers bestimmt. Die Koordinaten eines Punkts werden von oben nach unten (top) und von links nach rechts (left) angegeben.

Die relative Position bezieht sich auf andere Elemente, zum Beispiel ein Bild. Elemente, die sich in einem der Tags DIV oder SPAN befinden, werden im Anschluss an die HTML-Elemente positioniert, hinter denen sie sich befinden.



Positionieren von Text

Zum Positionieren des Texts "Wie geht das?" (unser Logo CCM kommt vom Französischen Comment ça marche, auf Deutsch Wie geht das?) 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken Rand muss man den folgenden Code eingeben:

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">
Wie geht das?
</SPAN>
</BODY>
</HTML>


Man kann dafür alternativ auch so vorgehen:

<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 Rand, geben Sie den folgenden Code ein:

<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 in den Stylesheets zu spezifizieren, da es sonst zu Kompatibilitätsproblemen mit den verschiedenen Browsern kommen kann.

Elemente übereinanderlegen

Um den Text "Wie geht das?" (Comment ça marche) über das Bild "test.jpg" zu legen, können Sie diesen Code benutzen:

<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>


So lassen sich Textelemente und Bilder übereinanderlegen.

Foto: © Alexey V Smirnov - Shutterstock.com
Jean-François Pillou

Unsere Inhalte werden in Zusammenarbeit mit IT-Experten erstellt, unter der Leitung von Jean-François Pillou, Gründer von CCM.net und Digitaldirektor bei Figaro Group. CCM ist eine führende internationale Technologie-Webseite und in elf Sprachen verfügbar.

Mehr Informationen über das Team von CCM

Lesen Sie auch

Letztes Update am 6. November 2017 04:50 von Silke Grasreiner.

Das Dokument mit dem Titel "Mit CSS Elemente positionieren" wird auf CCM (https://de.ccm.net/) unter den Bedingungen der Creative Commons-Lizenz zur Verfügung gestellt. Unter Berücksichtigung der Lizenzvereinbarungen dürfen Sie das Dokument verwenden, verändern und kopieren, wenn Sie dabei CCM deutlich als Urheber kennzeichnen.