Posicionamiento de los elementos en CSS

Septiembre 2017
Al usar hojas de estilo junto con las etiquetas <SPAN> y <DIV> se puede especificar la ubicación del texto o de las imágenes dependiendo de los píxeles.
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.

Consulta también


Positioning elements in CSS
Positioning elements in CSS
Mit CSS Elemente positionieren
Mit CSS Elemente positionieren
Positionner des éléments grâce aux CSS
Positionner des éléments grâce aux CSS
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
Como posicionar elementos graças ao CSS
Como posicionar elementos graças ao CSS
MP3
MP3
Última actualización: 16 de octubre de 2008 a las 15:43 por Jeff.
El documento «Posicionamiento de los elementos 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.