Posicionamiento

El posicionamiento en CSS permite controlar la ubicación de los elementos dentro de una página web. Mediante la propiedad position, podemos modificar la posición de un elemento respecto a su ubicación original, a un contenedor o a la ventana del navegador.

Junto a esta propiedad, CSS proporciona otras herramientas relacionadas con la disposición de los elementos:

• top, right, bottom y left: Permiten establecer desplazamientos o posiciones respecto a determinados límites.
• z-index: Permite controlar el orden de apilamiento de los elementos.
• float y clear: Permiten colocar elementos flotantes y controlar cómo se distribuye el contenido a su alrededor.

Actualmente, para construir la estructura general de una página web se utilizan principalmente Flexbox y CSS Grid, mientras que position se emplea para necesidades específicas de posicionamiento.

El flujo normal del documento

Antes de estudiar el posicionamiento, es importante comprender el concepto de flujo normal del documento (normal flow).

Por defecto, el navegador coloca los elementos HTML siguiendo unas reglas de distribución que dependen, entre otros factores, de su tipo de visualización (display).

Por ejemplo:

• Los elementos de bloque, como div o p, se colocan normalmente uno debajo de otro.
• Los elementos en línea, como span o strong, se distribuyen dentro de las líneas de texto.

Consideremos el siguiente HTML:

<div class="box">Caja 1</div>
<div class="box">Caja 2</div>
<div class="box">Caja 3</div>

.box {
  width: 200px;
  padding: 20px;
  margin: 10px;
  border: 1px solid black;
}

Las tres cajas aparecerán una debajo de otra, siguiendo el flujo normal del documento.

La propiedad position permite modificar este comportamiento. Dependiendo del valor utilizado, un elemento puede mantener su espacio en el flujo normal o quedar fuera de él.

Propiedad position

La propiedad position determina el método utilizado para posicionar un elemento.

Sus cinco valores principales son:

Static

position: static es el valor por defecto de la propiedad position.

• El elemento permanece en el flujo normal del documento.
• Su posición depende de las reglas habituales de distribución de los elementos.
• Las propiedades top, right, bottom y left no tienen efecto.

.box {
  position: static;
}

En este caso, la caja mantiene su posición habitual dentro del documento.

Relative

position: relative permite desplazar visualmente un elemento respecto a su posición original.

• El elemento permanece en el flujo normal.
• Las propiedades top, right, bottom y left permiten desplazarlo.
• El espacio que ocupaba originalmente sigue reservado.
• El desplazamiento no modifica la posición de los demás elementos dentro del flujo.

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

La caja se desplaza 20 píxeles hacia abajo y 10 píxeles hacia la derecha respecto a su posición original.

Sin embargo, el espacio que ocupaba inicialmente permanece reservado, por lo que los demás elementos mantienen su distribución.

Posición relativa y flujo normal

Aunque un elemento con position: relative se desplace visualmente, su posición original sigue utilizándose para distribuir el resto de los elementos.

Por tanto, el desplazamiento puede provocar que el elemento se superponga visualmente con otros, sin que estos cambien de posición.

Absolute

position: absolute permite colocar un elemento en una posición determinada respecto a su bloque contenedor (containing block).

• El elemento sale del flujo normal del documento.
• El espacio que ocupaba deja de reservarse.
• Las propiedades top, right, bottom y left permiten establecer su posición.
• Habitualmente, su referencia es el ancestro más cercano cuya propiedad position tenga un valor distinto de static.

Si no existe un ancestro que establezca un bloque contenedor, normalmente se utiliza el bloque contenedor inicial, relacionado con la ventana gráfica.

También existen otras propiedades, como transform, que pueden establecer el bloque contenedor de un elemento posicionado absolutamente.

Ejemplo:

<div class="container">
  <div class="box">Caja posicionada</div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

.box {
  position: absolute;
  top: 20px;
  right: 10px;
}

En este caso:

• El contenedor tiene position: relative.
• La caja tiene position: absolute.
• La caja se sitúa a 20 píxeles del borde superior y a 10 píxeles del borde derecho del área de referencia del contenedor.

Uso habitual de relative y absolute

Una combinación muy frecuente consiste en utilizar position: relative en un contenedor y position: absolute en uno de sus elementos descendientes.

De esta manera, podemos posicionar elementos como iconos, etiquetas o botones en lugares concretos dentro de un componente.

El contenedor no necesita desplazarse: position: relative permite establecer la referencia para el posicionamiento absoluto.

Fixed

position: fixed permite colocar un elemento en una posición fija respecto a la ventana gráfica (viewport), en los casos habituales.

• El elemento sale del flujo normal del documento.
• Su espacio original deja de reservarse.
• Se mantiene en la misma posición mientras el usuario desplaza la página.
• Las propiedades top, right, bottom y left permiten establecer su ubicación.

.box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

La caja permanecerá a 20 píxeles de la parte inferior y a 20 píxeles de la parte derecha de la ventana, incluso cuando el usuario haga scroll.

Este posicionamiento se utiliza habitualmente para:

• Botones flotantes.
• Avisos o notificaciones.
• Barras de navegación fijas.
• Elementos de acceso rápido.

Referencia de fixed

Aunque normalmente fixed utiliza como referencia la ventana gráfica, determinadas propiedades aplicadas a sus ancestros, como transform, pueden hacer que su bloque contenedor sea otro elemento.

Sticky

position: sticky combina características del posicionamiento relativo y del posicionamiento fijo.

• El elemento permanece en el flujo normal.
• Inicialmente se comporta de forma similar a relative.
• Cuando el desplazamiento alcanza un límite establecido, el elemento se mantiene en esa posición.
• Su comportamiento está limitado por su bloque contenedor y depende del contenedor de desplazamiento correspondiente.

Para que funcione, debe establecerse al menos una propiedad de desplazamiento (top, right, bottom o left) con un valor distinto de auto en el eje correspondiente.

.header {
  position: sticky;
  top: 0;
}

En este ejemplo, el elemento se desplaza inicialmente con el contenido, pero cuando alcanza el límite superior establecido, permanece en esa posición mientras las condiciones de su contenedor lo permitan.

Es habitual utilizarlo para:

• Encabezados de secciones.
• Barras de navegación.
• Cabeceras de tablas.
• Menús que deben permanecer visibles durante el desplazamiento.

Consideraciones sobre sticky

El comportamiento de sticky depende de la estructura del documento y de las propiedades de sus contenedores.

Por ejemplo, propiedades como overflow: auto, overflow: hidden o overflow: scroll pueden modificar el contenedor de desplazamiento que utiliza como referencia.

Además, debe existir espacio suficiente para que el elemento pueda desplazarse y alcanzar el límite establecido.

Comparación de los valores de position

Valor	¿Conserva su espacio en el flujo?	Referencia habitual
static	Sí	Flujo normal del documento.
relative	Sí	Posición original del elemento.
absolute	No	Bloque contenedor establecido por un ancestro.
fixed	No	Ventana gráfica (viewport).
sticky	Sí	Posición normal y contenedor de desplazamiento.

Propiedad z-index

La propiedad z-index permite controlar el orden de apilamiento de los elementos cuando se superponen visualmente.

En los casos habituales, los elementos con valores mayores de z-index aparecen por encima de los elementos con valores menores, siempre que pertenezcan al mismo contexto de apilamiento.

.box1 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2;
}

En este ejemplo, si ambas cajas pertenecen al mismo contexto de apilamiento, .box2 aparecerá por encima de .box1 en las zonas donde se superpongan.

La propiedad admite valores enteros positivos, negativos y cero, además del valor auto.

Contextos de apilamiento

CSS organiza los elementos en contextos de apilamiento (stacking contexts).

Un contexto de apilamiento es un grupo de elementos cuyo orden de superposición se organiza internamente.

Esto significa que un elemento con z-index: 9999 no necesariamente aparecerá por encima de otro con z-index: 10 si pertenecen a contextos de apilamiento diferentes.

Los contextos de apilamiento pueden generarse mediante distintas propiedades CSS, por ejemplo:

• Elementos posicionados con un z-index entero.
• Elementos con position: fixed o position: sticky.
• Elementos con opacity inferior a 1.
• Elementos con determinadas transformaciones CSS.

z-index y position

La propiedad z-index se utiliza habitualmente con elementos cuyo position es relative, absolute, fixed o sticky.

Sin embargo, también puede aplicarse a elementos flex y grid, aunque tengan position: static.

Por tanto, no es obligatorio utilizar un posicionamiento distinto de static en todos los casos.

Propiedad float

La propiedad float permite desplazar un elemento hacia un lado de su contenedor, haciendo que el contenido en línea, como el texto, fluya a su alrededor.

Sus valores más habituales son:

• left: El elemento flota hacia la izquierda.
• right: El elemento flota hacia la derecha.
• none: El elemento no flota. Es el valor por defecto.

Ejemplo:

<article>
  <img src="image.jpg" alt="Imagen de ejemplo" />
  <p>
    Este texto rodeará la imagen situada a la izquierda. El contenido continuará
    distribuyéndose alrededor de la imagen mientras exista espacio disponible.
  </p>
</article>

img {
  float: left;
  width: 150px;
  margin-right: 15px;
}

En este ejemplo, la imagen se coloca a la izquierda y el texto fluye a su derecha y, si tiene suficiente longitud, continúa por debajo de ella.

Uso actual de float

Tradicionalmente, float se utilizaba también para construir diseños de columnas y distribuir elementos en una página.

Actualmente, Flexbox y CSS Grid son las técnicas recomendadas para realizar estas tareas, ya que ofrecen un control más adecuado sobre la distribución y alineación de los elementos.

Sin embargo, float sigue siendo útil cuando queremos que un texto rodee una imagen u otro elemento.

Propiedad clear

La propiedad clear permite controlar la posición de un elemento respecto a los elementos flotantes anteriores.

Se utiliza principalmente para evitar que un elemento se sitúe junto a determinados elementos con float.

Sus valores más habituales son:

• left: Evita que el elemento se coloque junto a elementos flotantes anteriores situados a la izquierda.
• right: Evita que el elemento se coloque junto a elementos flotantes anteriores situados a la derecha.
• both: Evita que el elemento se coloque junto a elementos flotantes anteriores de cualquiera de los dos lados.
• none: No aplica ninguna restricción de este tipo. Es el valor por defecto.

Ejemplo:

<div class="container">
  <img src="image.jpg" alt="Imagen de ejemplo" />
  <p>Texto que rodea la imagen.</p>
  <div class="footer">Contenido posterior</div>
</div>

img {
  float: left;
  width: 150px;
  margin-right: 15px;
}

.footer {
  clear: both;
}

En este caso, .footer se situará por debajo de los elementos flotantes anteriores que pudieran quedar a su lado.

Relación entre float y clear

Las propiedades float y clear suelen utilizarse conjuntamente:

• float permite colocar un elemento flotante y hacer que el contenido fluya a su alrededor.
• clear permite evitar que determinados elementos posteriores se coloquen junto a esos elementos flotantes.

Aunque estas propiedades siguen formando parte de CSS y tienen aplicaciones concretas, no se recomienda utilizarlas para construir la maquetación general de una página web.

Para organizar filas, columnas y estructuras de diseño modernas utilizaremos Flexbox y CSS Grid.