Posicionamiento y visibilidad de las cajas

Seguimos con las mismas tres cajas hermanas y el mismo HTML. Hasta ahora se repartían el espacio entre ellas; ahora se trata de mover una sola, o de hacerla desaparecer, y de observar qué les pasa a las otras dos.

• Posicionar elementos

  La propiedad es position, y siempre va acompañada de top, bottom, left o right, que indican cuánto se desplaza y hacia dónde.

  1. position: static

     Qué hace

     Nada: es el valor que tienen todos los elementos sin que nadie lo escriba. La caja está en el flujo, en el sitio que le toca. No admite top ni left: si se escriben, se ignoran. Conviene conocerlo porque es el punto de partida de todos los demás.

  2. position: relative

     Respecto a qué se mueve

     Respecto a donde debería estar. Con top: 20px; left: 20px; se dibuja 20 px más abajo y 20 px más a la derecha de su posición natural.

     Qué pasa con su hueco

     Lo conserva. La caja se dibuja desplazada, pero el espacio que ocupaba sigue reservado y los hermanos no se mueven. Puede acabar montada sobre la caja vecina.

     Para qué se usa de verdad

     Pocas veces para mover algo. Su uso principal es otro: convertir a un contenedor en la referencia de un hijo con absolute. En ese caso se escribe position: relative a secas, sin top ni left, y no mueve nada.

  3. position: absolute

     Respecto a qué se mueve

     Respecto al antecesor posicionado más cercano: el primer contenedor, subiendo, que tenga una position distinta de static. Si no encuentra ninguno, se coloca respecto a la página entera, que casi nunca es lo que se quería.

     Qué pasa con su hueco

     Lo pierde. La caja sale del flujo: deja de ocupar sitio y los hermanos se recolocan como si no existiera. Tampoco empuja a nadie ni nadie la empuja a ella.

     Los dos pasos

     Siempre son dos, y el primero es el que se olvida:

     1. position: relative; en el contenedor.
     2. position: absolute; más top / right en el elemento.

     Un aviso

     Una caja absoluta se encoge al tamaño de su contenido y no se adapta al ancho disponible. Por eso no sirve para repartir columnas: para eso, Flexbox o Grid.

     Casos reales

     Una insignia sobre una imagen, un menú desplegable, un botón flotante.

  4. position: fixed

     Respecto a qué se mueve

     Respecto a la ventana del navegador, no a la página. Ignora a su contenedor, aunque este sea relative.

     Qué pasa con su hueco

     Lo pierde, igual que absolute: sale del flujo.

     Cómo se reconoce

     No se mueve al hacer scroll. La página se desplaza por debajo y la caja se queda clavada donde está.

     Casos reales

     Una cabecera siempre visible, un botón de «volver arriba», un aviso de cookies.

  5. position: sticky

     Qué hace

     Las dos cosas, según el momento. Se comporta como relative —en su sitio, conservando su hueco— hasta que al hacer scroll llega al borde que se le ha marcado; a partir de ahí se queda pegada, como fixed.

     Qué hay que escribir

     Obligatoriamente el borde donde se pega: position: sticky; top: 0; Sin esa segunda línea no hace nada, y es el fallo más habitual.

     Casos reales

     El encabezado de una tabla larga, un menú de sección que acompaña mientras se lee, el índice lateral de un artículo.

  Lo que hay que retener: relative es el ancla y absolute es el que se mueve. Y de las cuatro, solo relative y sticky conservan su hueco; las otras dos salen del flujo y dejan que los hermanos se recoloquen.

• Ocultar elementos
  1. visibility: hidden

     Qué hace

     Oculta el elemento, pero su espacio sigue reservado. Queda un hueco vacío del tamaño exacto que ocupaba.

     Cuándo conviene

     Cuando se quiere que la maqueta no dé un salto al volver a mostrarlo. Lo que hay alrededor no se mueve ni al ocultarlo ni al enseñarlo.

  2. display: none

     Qué hace

     El elemento no se dibuja y no ocupa ningún sitio. Los hermanos se recolocan como si no existiera: el hueco se cierra entero.

     Una precisión importante

     El elemento sigue estando en el DOM: está en el HTML, el inspector lo muestra y JavaScript puede alcanzarlo. Lo que desaparece es su caja, no el elemento. Gracias a eso una web puede ocultar un menú con display: none y volver a mostrarlo después sin tener que crearlo de nuevo: es el mecanismo de los menús desplegables.

     Cuándo conviene

     Cuando el elemento sobra y no se quiere dejar un hueco en su lugar.

  Lo que hay que mirar no es el elemento oculto: son sus hermanos. Con display: none se expanden y ocupan su sitio; con visibility: hidden no se mueven. Esa es toda la diferencia.

Resumen