Cómo posicionar elementos en CSS

Abril 2018
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.

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: 17 de enero de 2018 a las 23:43 por Carlos-vialfa.
El documento «Cómo posicionar elementos en CSS» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (https://es.ccm.net/) como tu fuente de información.
Propiedades