Esto es posible en versiones 4 y superiores de Netscape e Internet Explorer; sin embargo, la técnica todavía es difícil 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 dan desde arriba hacia abajo (arriba) y desde la izquierda hacia la derecha (izquierda).
El posicionamiento relativo se define de acuerdo con otros elementos de la página, es decir que los elementos que contienen las etiquetas DIV o SPAN se posicionarán en base a los elementos HTML que los precedan.
 |
Posicionamiento de texto
Ubiquemos el texto "¿Cómo funciona?" 80 píxeles desde la parte superior de la ventana y 100 píxeles desde 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>Posicionamiento de una imagen
Ubiquemos la imagen "test.jpg" 80 píxeles desde la parte superior de la ventana y 100 píxeles desde la izquierda (la imagen es de 103 x 61):
<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.
Superposición de 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.
No hay comentarios:
Publicar un comentario