Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 7 · Semana 3

Flujo normal, `display` y posicionamiento

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo coloca el navegador los elementos cuando no le dices nada, y qué pasa cuando sacas uno de ese flujo.
  2. 2. Haz: Experimenta con los modos de display y de position sobre unas cajas.
  3. 3. Comprueba: Sabes explicar qué ocurre con el hueco que ocupaba cada elemento.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué problema resuelve una custom property?
  2. ¿En qué se diferencia un valor fijo de uno limitado con clamp()?
  3. Predice qué cambia si sustituyes var(--color-principal) en la declaración de :root.

Antes de Flexbox y Grid está el flujo normal

Flujo normal

La forma en que el navegador coloca los elementos por defecto: unos detrás de otros, siguiendo el orden del documento. Todo lo que veremos después son maneras de modificarlo, no de sustituirlo.

Merece la pena entenderlo porque el flujo normal ya resuelve bien muchas cosas. Un artículo con sus párrafos y sus encabezados, uno debajo de otro y ocupando el ancho disponible, no necesita nada.

Comportamiento Qué hace Elementos típicos
Bloque Ocupa todo el ancho disponible y empieza en una línea nueva div, section, article, p, h1
En línea Ocupa solo lo que mide su contenido y se coloca dentro del texto a, strong, em, span, img

display

display: block;          /* fuerza el comportamiento de bloque */
display: inline;         /* fuerza el de línea */
display: inline-block;   /* fluye como texto, pero acepta ancho, alto y márgenes verticales */
display: none;           /* lo saca del documento por completo */
display: flex;           /* la semana que viene */
display: grid;

inline-block resuelve la limitación clásica: a un elemento en línea no puedes darle width ni márgenes verticales útiles. Con inline-block sí, y sigue colocándose en la misma línea que su texto.

display: none no es «invisible»

Elimina el elemento del documento: no ocupa espacio y tampoco existe para un lector de pantalla ni para el recorrido con Tab. Eso es correcto cuando quieres ocultar algo de verdad, y es un error cuando solo querías que no se viera.

Si necesitas que algo siga estando disponible para quien no ve la pantalla, existen otras técnicas. Si la intención era únicamente que ocupara su hueco sin verse, eso es visibility: hidden o una opacidad, no display: none.

position

position: static;    /* el valor por defecto: sigue el flujo */
position: relative;  /* sigue ocupando su hueco, pero se desplaza respecto a él */
position: absolute;  /* sale del flujo y se coloca respecto a su ancestro posicionado */
position: fixed;     /* sale del flujo y se coloca respecto al viewport */
position: sticky;    /* sigue el flujo hasta llegar a un límite, y entonces se queda */

La distinción que importa es si el elemento deja o no su hueco:

Valor ¿Deja hueco? Consecuencia
relative Sí Se mueve, pero los demás siguen contando con él
absolute No Los demás ocupan su sitio como si no existiera
fixed No Igual, y además no se mueve al hacer scroll
sticky Sí Se comporta normal hasta que toca su límite

relative casi nunca se usa para mover nada: se usa para crear el punto de referencia al que un absolute hijo se agarrará. De hecho es justo lo que hace el botón de copiar de esta misma página.

.card          { position: relative; }
.card .etiqueta{ position: absolute; top: 0; right: 0; }

No se maqueta con position: absolute

Colocar cada bloque de la página con coordenadas parece que funciona, y es la maqueta más frágil que existe: los elementos ya no saben nada unos de otros, así que en cuanto un texto crece se solapan, y en una pantalla más estrecha todo queda fuera de sitio.

absolute es para lo que de verdad es posicionamiento: una etiqueta de «oferta» sobre una esquina, un icono dentro de un campo. La distribución de la página se hace con Flexbox y con Grid.

overflow

overflow: visible;  /* por defecto: el contenido se sale y se ve */
overflow: auto;     /* aparece barra de scroll si hace falta */
overflow: hidden;   /* se recorta lo que no cabe */

overflow: hidden es tentador cuando algo desborda, y muchas veces es tapar el problema en lugar de resolverlo: el contenido sigue sin caber, ahora además no se puede leer. Antes de usarlo, pregunta por qué no cabe.

Donde sí es la respuesta correcta es en contenido que legítimamente es más ancho que la pantalla, como una tabla de datos: ahí overflow-x: auto en un contenedor le da su propia barra de scroll sin romper la página.

Tarea 7 · Rompe el flujo

Crea un archivo de pruebas laboratorio.html con cuatro cajas de colores, una debajo de otra, y experimenta. Para cada apartado anota qué le pasa a la caja y, sobre todo, qué le pasa al hueco que ocupaba.

  1. Cambia la segunda a display: inline. ¿Por qué deja de hacer caso al width?
  2. Cambia la segunda a display: inline-block. ¿Qué recupera?
  3. Ponle position: relative y desplázala con top: 20px. ¿Se han movido las demás?
  4. Ponle position: absolute con top: 0; right: 0. ¿Respecto a qué se ha colocado? Ahora dale position: relative a su contenedor y observa la diferencia.
  5. Ponle position: sticky; top: 0 a la primera y haz scroll.
  6. Ponle display: none a la tercera y compáralo con visibility: hidden.
Apartado Qué le pasa al elemento Qué le pasa a su hueco
Estoy atascado · mi absolute se va a la esquina de la pantalla

Un elemento absolute se coloca respecto a su ancestro posicionado más cercano, y si no encuentra ninguno, respecto al documento entero. Por eso acaba en la esquina de la página en lugar de en la de su tarjeta.

La solución es la del ejemplo: darle position: relative al contenedor que quieres que sirva de referencia. Es prácticamente el único uso de relative que verás en código profesional.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre relative y absolute respecto al hueco?
  2. ¿Respecto a qué se posiciona un absolute?
  3. ¿Por qué display: none no es lo mismo que «no se ve»?
Ver respuestas

1 · relative sigue ocupando su hueco aunque se desplace; absolute sale del flujo y los demás elementos ocupan su sitio.

2 · Respecto a su ancestro posicionado más cercano, y si no hay ninguno, respecto al documento.

3 · Porque lo elimina del documento: deja de existir también para los lectores de pantalla y para el recorrido con Tab.