Posicionamiento CSS

Salvo que se especifique lo contrario, los elementos de una página web se comportan de manera predecible: se colocan uno debajo del otro (elementos de bloque como <div> o <h2>) o uno al lado del otro (elementos en línea como <a> o <span>). Este es lo que se conoce como flujo normal del documento.

Cuando queremos romper ese flujo, cuando necesitamos colocar un texto encima de una imagen, o crear un icono que siempre esté fijo en una esquina de la pantalla, necesitamos mecanismos que nos permitan posicionar esos elementos en el lugar deseado. Para lograr esto y mucho más, utilizamos la propiedad position de CSS.

La propiedad position permite controlar cómo se ubica un elemento en la página. Aunque en este documento hablaremos de relative y absolute, existen 5 valores principales:

  • static: Es el valor por defecto. El elemento sigue el flujo normal de la página. Las propiedades top, right, bottom y left no tienen ningún efecto.
  • absolute: El elemento es «arrancado» del flujo normal y se posiciona relativo a su ancestro posicionado más cercano. Si no tiene ninguno, se posiciona relativo al <body>. El ancho del elemento es el ancho de su contenido. Al ser «arrancado» del flujo normal, el resto de elementos se comporta como si no existiera.
  • relative: El elemento se mueve o desplaza relativo a su posición original en el flujo normal. Los demás elementos se comportan como si estuviera en el flujo. Es el punto de partida para el posicionamiento de otros elementos.
  • fixed: El elemento se posiciona relativo a la ventana del navegador (viewport). Esto significa que se quedará fijo en el mismo lugar incluso si hacemos scroll.
  • sticky: Es una mezcla entre relative y fixed. El elemento se comporta como relative hasta que llegas a un cierto punto de scroll, y a partir de ahí se comporta como fixed.

Entendiendo position: absolute – Rompiendo las Reglas del Flujo

Cuando se aplica la propiedad position: absolute; a un elemento, el elemento es «arrancado» completamente del flujo normal del documento. Es como si se convirtiera en un fantasma o una capa flotante.

  • Ya no ocupa espacio: El resto de los elementos actuarán como si el elemento absoluto no existiera.
  • Busca un ancla: Se posicionará usando las propiedades top, right, bottom y left, pero ¿relativo a qué? Buscará a su ancestro posicionado más cercano (cualquier ancestro que tenga un position distinto de static, ¡generalmente relative!). Si no encuentra ninguno, usará el <body> como referencia.

Esta relación padre relative / hijo absolute es una de las técnicas más importantes y utilizadas en el diseño web moderno.

Entendiendo position: relative – El Punto de Anclaje

Cuando utilizamos position: relative le estamos diciendo a un elemento: «Prepárate, porque podrías tener que moverte un poco, y además, podrías servir de referencia para otros elementos».

Al aplicar position: relative; a un elemento, ocurren dos cosas importantes:

  1. Se habilitan las propiedades de desplazamiento: Ahora puedes usar top, right, bottom y left para «empujar» el elemento desde su posición original. Por ejemplo, left: 20px; moverá el elemento 20 píxeles hacia la derecha desde donde debería estar. Importante: aunque lo muevas, el espacio que ocupaba originalmente en el flujo se respeta, quedando un hueco.
  2. Se convierte en un «contexto de posicionamiento»: Este es su uso más poderoso. Un elemento con position: relative se convierte en el «ancla» o contenedor de referencia para cualquier elemento hijo que tenga position: absolute.

Otras formas de modificar el posicionamiento de elementos

Display: inline

La propiedad display: inline hace que un elemento se comporte como elemento de línea (podría verse como una palabra o una letra dentro de un párrafo). Es el modo de visualización por defecto para etiquetas como <span>, <a> (enlaces), <strong> (negrita) o <em> (cursiva).

Algunas de las características más destacadas de los elementos «inline» son:

  1. Fluye con el texto: el elemento no provoca un salto de línea ni antes ni después de él. Se coloca en la misma línea que el contenido adyacente, respetando el flujo del texto.
  2. Ocupa solo el espacio necesario: un elemento inline se ajusta al tamaño de su contenido. Por esta razón, no se puede definir un width (ancho) o un height (alto). Simplemente, estas propiedades serán ignoradas por el navegador.
  3. Respeta márgenes y padding HORIZONTALES: se puede añadir espacio a la izquierda y a la derecha del elemento usando margin-left, margin-right, padding-left y padding-right.
  4. IGNORA márgenes y padding VERTICALES: este es el punto más importante y que suele causar confusión. Un elemento inline ignora por completo las propiedades margin-top, margin-bottom, padding-top y padding-bottom. No se puede añadir espacio verticalmente porque rompería la consistencia del espaciado (el interlineado) del párrafo donde se encuentra.

¿Cuándo se usa display: inline?

Se utiliza principalmente cuando se necesita aplicar un estilo a una pequeña porción de texto dentro de un bloque más grande sin alterar la estructura de la frase o el párrafo.

  • Para crear un enlace dentro de una oración.
  • Para cambiar el color o el fondo de una o varias palabras.
  • Para añadir un pequeño icono junto a un texto.

La etiqueta <span> es la herramienta perfecta para esto, ya que es un elemento inline genérico que no tiene ningún estilo por defecto, listo para que lo personalices.

Uso de display: inline para crear un menú horizontal

Un menú de navegación, semánticamente, es una lista de elementos. Los elementos <li> de una lista son elementos de bloque y, como tales, se muestran uno debajo de otro. Para conseguir mostrarlos en la misma línea se puede utilizar la propiedad display:inline.

Uso de display: inline-block

En situaciones donde se necesita que un elemento esté en línea pero también se quiere controlar su alto, ancho y espaciado vertical será útil utilizar la propiedad display: inline-block. A continuación se muestran las semejanzas y diferencias entre ambas propiedades:

Característicadisplay: inlinedisplay: inline-block
Provoca salto de líneaNoNo
Respeta width y heightNoSí
Respeta margin/padding verticalesNoSí

Propiedad transform

La propiedad transform de CSS permite modificar el espacio visual que ocupa un elemento, haciendo posible rotarlo, escalarlo, moverlo o sesgarlo sin afectar el flujo normal del documento.

A diferencia de cambiar propiedades como margin o top, las transformaciones a menudo son gestionadas por la tarjeta gráfica (GPU) del dispositivo. Esto hace que las animaciones creadas con transform sean mucho más fluidas y tengan un mejor rendimiento, ya que no obligan al navegador a recalcular el diseño de toda la página.

Funciones de Transformación Principales

La propiedad transform funciona aplicando una o varias «funciones». Las más comunes son:

1. translate() – Mover

Desplaza un elemento de su posición original en el eje X, Y o ambos.

  • transform: translateX(50px); /* Mueve el elemento 50px hacia la derecha. */
  • transform: translateY(-20px); /* Mueve el elemento 20px hacia arriba. */
  • transform: translate(50px, -20px); /* Forma corta para moverlo en X e Y. */
2. scale() – Escalar

Cambia el tamaño del elemento, haciéndolo más grande o más pequeño. El valor 1 representa el tamaño original.

  • transform: scale(1.5); /* Aumenta el tamaño del elemento en un 50% en ambas dimensiones. */
  • transform: scale(0.8); /* Reduce el tamaño del elemento en un 20%. */
  • transform: scaleX(2); /* Duplica el ancho del elemento, pero mantiene su altura original. */
  • transform: scaleY(0.5); /* Reduce la altura del elemento a la mitad. */
3. rotate() – Rotar

Gira un elemento alrededor de un punto de origen. Se mide en grados (deg).

  • transform: rotate(45deg); /* Gira el elemento 45 grados en el sentido de las agujas del reloj. */
  • transform: rotate(-90deg); /* Gira el elemento 90 grados en sentido contrario a las agujas del reloj. */
4. skew() – Sesgar

Inclina el elemento a lo largo del eje X o Y, como si se estuviera empujando una de sus esquinas.

  • transform: skewX(20deg); /* Inclina el elemento 20 grados a lo largo del eje horizontal. */
  • transform: skewY(10deg); /* Inclina el elemento 10 grados a lo largo del eje vertical. */

transform-origin: El Punto de Anclaje

Por defecto, todas las transformaciones ocurren desde el centro del elemento (50% 50%). La propiedad transform-origin permite cambiar este punto de anclaje.

Supongamos que ponemos una chincheta en una foto para girarla. transform-origin es la posición de esa chincheta.

  • transform-origin: top left; /* Las rotaciones y escalas ocurrirán desde la esquina superior izquierda. */
  • transform-origin: bottom; /* Ocurrirán desde el centro del borde inferior. */

Resumen

Alterar el flujo normal del contenido en la pantalla o la posición de los elementos de puede realizar de diferentes maneras. Sin entrar en otros modelos de posicionamiento como Flexbox o GridLayout, el posicionamiento absoluto y relativo, la propiedad display:inline o la propiedad transform permiten cambiar la manera o posición donde se muestra un elemento en pantalla. Las cuestiones clave que hay que recordar son:

  • position:relative: el elemento se queda en el flujo, pero se puede desplazarlo un poco desde su sitio original. Su función más habitual es servir de ancla para un hijo con position: absolute.
  • position:absolute: el elemento abandona el flujo, no ocupa espacio, y se posiciona con top/right/bottom/left basándose en el primer padre posicionado que encuentra.
  • display:inline: hace que un elemento de bloque se muestre como un elemento de línea.
  • transform: permite mover, rotar, escalar o sesgar un elemento.