| AnteriorElementos en bloque y bordes | Posicionamiento de los elementos en CSS | SiguientePropiedades |
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.
 |
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>
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.
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.
Última actualización el jueves, 16 de octubre de 2008, 15:43:29 .
"el elemento ya no está ubicado en" Como hacer los elementos de escritorio Definicion de clase en css Descargar adobe photoshop elements 7.0 El metodo como elemento de la p.o.o Elementos de mi pc Elementos de un sistema de informacion Elementos del panel de control Elementos del sistema de informacion Elementos del sistema operativo Elementos quimicos de la computadora En mi nokia 5200 en la memoria sale elementos ocultos Formulario y sus elementos en html Insertar css en html Posicionar elemento al borde superior de una celda css Programas para crear formularios css Recuperar elementos eliminados y bloqueados Ventana de windows y sus elementos