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.

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 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;">
¿Cómo funciona?
</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 "¿Cómo funciona?" 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;">
¿Cómo funciona?
</SPAN>
</BODY>
</HTML>

Con esta sintaxis se pueden superponer tanto elementos de texto como imágenes.
Foto: ©123RF

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
Consulta también
El documento « Cómo posicionar texto e imágenes en CSS » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.