Posicionamiento CSS

La propiedad position es fundamental para mover elementos en el flujo del documento (static, relative, absolute, fixed).

Saber usar position es como entender la gravedad de CSS. No la ves, pero está empujando todo lo que haces.

¿Qué es position en CSS?

• Definición sencilla: La propiedad position define cómo un elemento se coloca en la página y cómo interactúa con otros elementos (document flow).
• Una vez que cambias el valor de position a algo distinto de static, el navegador te permite utilizar las propiedades top, right, bottom y left para mover el elemento desde su posición original (en el caso de relative) o dentro del contexto definido por su contenedor posicionado (absolute, fixed, sticky).
• Estas propiedades no funcionan si el valor de position es static, que es el valor por defecto.

¿Qué es el flujo del documento (document flow)?

• El flujo del documento es la forma natural en que los elementos HTML se colocan en una página. Por defecto, los elementos *block-level* como div, section o p se apilan verticalmente, uno debajo del otro. Los elementos *inline* como span o a fluyen horizontalmente dentro de su contenedor, como palabras en una frase.

• Este comportamiento es el flujo normal del documento, y cualquier elemento que no tenga una posición específica (position: static, que es el valor por defecto), forma parte de ese flujo.

• Cuando un elemento sale del flujo (por ejemplo, usando position: absolute o fixed), deja de afectar y ser afectado por los elementos que lo rodean. Esto puede ser útil (para overlays, tooltips, botones flotantes, etc.), pero también puede provocar efectos inesperados si no se entiende bien.

  <div class="box red"></div>
  <div class="box blue"></div>
  

  .box {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  
  .red {
    background-color: red;
  }
  
  .blue {
    background-color: blue;
    /*position: absolute;*/
    /*top: 0*/
  }
  

• Al descomentar el código, la caja azul se superpone a la roja, y el espacio entre ambas desaparece, porque .blue ya no forma parte del flujo del documento.

Valores principales de position

static (por defecto)

• El elemento se posiciona según el flujo normal de la página.
• No puedes moverlo con top, right, bottom o left.

div {
  position: static; /* This is the default value */
}

relative

• El elemento permanece en su posición normal (sigue el flujo de documento), pero puedes moverlo usando top, right, bottom o left sin afectar a los demás.

.purple {
  background-color: purple;
  width: 300px;
  padding: 1rem;
  position: relative;
  top: 10px; /* Moves 10 px bottom from its original position */
}

absolute

• El elemento se posiciona en relación a su primer contenedor posicionado (no static).
• Sale del flujo normal, por lo que no afecta a otros elementos.
• Perfecto para crear tooltips, botones flotantes o elementos que deben colocarse exactamente sobre otro, como modales.

<div class="tooltip-wrapper">
  Hover me
  <span class="tooltip">I’m a tooltip</span>
</div>

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 80px;
  background: black;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  display: none; /* Hidden */
}

fixed

• El elemento sale del flujo y se posiciona en relación a la ventana del navegador. No se mueve al hacer scroll.
• Útil para barras de navegación que deben permanecer visibles, botones de “subir arriba” o banners persistentes.

<header class="navbar">
  Fixed Navigation
</header>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: navy;
  color: white;
  padding: 1rem;
}

sticky

• El elemento actúa como relative dentro de su contenedor (permanece en el flujo), pero se fija en la posición especificada al hacer scroll.
• Ideal para cabeceras de secciones que se quedan fijas al hacer scroll solo dentro de su contenedor.

<section>
  <h2 class="sticky-heading">Section Title</h2>
  <p>...</p>
</section>

.sticky-heading {
  position: sticky;
  top: 0;
  background: white;
  padding: 0.5rem;
}

Bonus: ¿Y si dos elementos se superponen?

• Cuando usas position: relative, absolute, fixed o sticky, el elemento puede superponerse a otros. En ese caso, puedes decidir cuál debe estar “encima” con z-index.

  .red {
    position: absolute;
    z-index: 1;
  }
  
  .blue {
    position: absolute;
    z-index: 2;
  }
  

• El .box-blue aparecerá por encima del .box-red porque su z-index es mayor.

  • El valor por defecto de z-index es auto.
  • Solo funciona en elementos que no están en position: static.
  • Cuanto mayor el número, más arriba en la pila de capas.

¿Y los contextos de apilamiento?

• A veces verás que un elemento con z-index: 9999 no aparece encima de otro. Eso es porque hay algo llamado stacking context (contexto de apilamiento), que separa las “capas” del DOM y puede limitar el efecto del z-index.
• Lo veremos más adelante, ya que en este punto solo añadiría ruido.

Buenas prácticas

• Usa relative para ajustar elementos sin sacarlos del flujo.
• Usa absolute y fixed con cuidado, ya que pueden complicar el diseño si no se manejan correctamente.
• Prueba sticky para cabeceras o elementos que deban quedarse visibles al hacer scroll.