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
- Posicionar texto css
- Como posicionar un texto en css - Mejores respuestas
- Posicion texto css - Mejores respuestas
- Css descargar - Programas - Diseño y desarrollo web
- Como pronunciar un texto en ingles ✓ - Foro Software
- Quitar subrayado hipervinculo css - Guide
- Códigos de páginas web en html y css hechas ✓ - Foro de programación
- Editar jpg con texto ✓ - Foro Software
