Cómo posicionar texto e imágenes en CSS

Gracias a las hojas de estilo, es posible posicionar texto o imágenes con la precisión de un píxel mediante las etiquetas "<SPAN>" y "<DIV>". Esto es posible en las versiones 4 y superiores de Netscape e Internet Explorer; sin embargo, la técnica todavía es complicada y puede causar problemas de compatibilidad.

¿Qué es el posicionamiento absoluto y relativo?

El posicionamiento absoluto {position: absolute} está determinado en relación con la esquina superior izquierda de la ventana del navegador. Las coordenadas de un punto se expresan entonces de arriba a abajo (top) y de izquierda a derecha (left).
El posicionamiento relativo se define de acuerdo con otros elementos de la página, lo que quiere decir que los elementos que contienen las etiquetas <DIV> o <SPAN> se posicionarán a continuación de los elementos HTML que los precedan.

Cómo posicionar texto e imágenes en CSS — © Libre de derechos

¿Cómo posicionar un texto?

Ubiquemos el texto "Comment ça marche" (''Cómo funciona'' en español) a 80 píxeles de la parte superior de la ventana y 100 píxeles de la izquierda:

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">
Comment ça marche
</SPAN>
</BODY>
</HTML>

Existen otras maneras de hacer esto, por ejemplo:

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
¿Cómo funciona?
</DIV>
</BODY>
</HTML>

¿Cómo posicionar una imagen?

Ubiquemos la imagen "test.jpg" a 80 píxeles desde la parte superior de la ventana y 100 píxeles desde la izquierda (la imagen es de 103x61):

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

Es importante especificar el tamaño de la imagen en las hojas de estilo para reducir el riesgo de incompatibilidad con el navegador.

¿Cómo superponer elementos?

Vamos a superponer el texto "Comment ça marche?" sobre la imagen "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;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>