Curso de CSS / position: relative, absolute, fixed y sticky

La propiedad position cambia cómo se posiciona un cuadro y cómo participa en el flujo normal. relative retiene su espacio original, absolute y fixed salen del flujo, y sticky combina la colocación en flujo normal con adherencia limitada durante el desplazamiento.

Compara los modos de posicionamiento con static

El flujo normal es el diseño en el que los elementos ocupan espacio según las reglas de formato del documento. El texto que sigue a un elemento posicionado absolutamente no se mueve automáticamente para dejarle espacio. Cuando un elemento sale del flujo, el contenido posterior puede ocupar su espacio anterior. Evita la superposición mediante la estructura de diseño o el relleno apropiado. Compara el posicionamiento con display: block, inline, inline-block y ocultación para entender esta diferencia.

Los desplazamientos dependen del modo de posicionamiento. Con posicionamiento relativo, top: 16px desplaza la caja 16px hacia abajo desde su posición original. Con posicionamiento absoluto, top se mide desde su referencia del contenedor. Por lo tanto, el mismo número representa diferentes relaciones de posicionamiento. Consulta MDN: position.

Conserva el espacio original con relative

relative no vuelve a ubicar los demás elementos. Incluso si mueves una tarjeta un poco hacia abajo, la posición inicial de la siguiente tarjeta se mantiene. Por lo tanto, puede superponerse a los elementos de abajo o mostrar espacio vacío arriba. Si el propósito es cambiar el espaciado de todo el documento, primero verifica si el margen, el relleno y la separación son apropiados en lugar de usar top relativo.

Otro uso de relative es crear una referencia de posicionamiento absoluto para los hijos. Si solo escribes position: relative en el padre y no especificas un desplazamiento, el propio padre no se moverá y se convertirá en la base para el badge del hijo. Especificar una posición no significa inmediatamente que todos los elementos se superpongan o salgan del flujo del documento.

Encuentra el bloque contenedor de absolute

Los elementos absolutos generalmente se posicionan en relación con su ancestro más cercano que no sea estático. Si aplicas position: relative a la tarjeta y position: absolute, top y right al hijo, se convierte en una insignia dentro de la tarjeta. Si no hay un ancestro correspondiente, se utiliza un criterio más externo, lo que puede hacer que la insignia se mueva hacia la página en lugar de hacia la tarjeta. Propiedades como transform también pueden establecer un bloque contenedor; no basta con buscar las declaraciones de position.

Un elemento padre con solo hijos absolutos no añade la altura de sus hijos a la altura del contenido en el flujo normal. Pueden ocurrir problemas donde el padre parece tener altura cero o los bordes están colapsados, incluso aunque los hijos sean visibles. Si el contenido necesita determinar naturalmente la altura del padre, es más fácil gestionarlo colocando a los hijos en el flujo y haciendo solo que las pequeñas insignias superpuestas sean absolutas.

Compara el flujo normal con una insignia absoluta

Guarda el código siguiente como position-flow.html. Las tres secciones están compuestas por el elemento frontal, objetivo y el elemento trasero en el mismo orden HTML. Los 12px de la insignia de la tarjeta se miden desde los bordes del bloque contenedor establecido por la tarjeta, y se asegura el padding superior para que no se solape con el cuerpo de la tarjeta.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-flow.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.flow { border: 2px dashed #789; margin-bottom: 40px; margin-right: 24px; }
 .flow > div { height: 56px; padding: 12px; background: #e8f5de; }
 .flow .target { background: #dceefa; }
 .relative .target { position: relative; top: 16px; left: 20px; }
 .absolute { position: relative; }
 .absolute .target { position: absolute; top: 16px; left: 20px; }
 .card { position: relative; padding: 64px 20px 20px; background: #dceefa; max-width: 600px; }
 .badge { position: absolute; top: 12px; right: 12px; padding: 4px 12px; background: #ffe4b5; }
  </style>
</head>
<body>
<h1>Does the original space remain?</h1>
<h2>static</h2><div class="flow static"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>relative</h2><div class="flow relative"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>absolute</h2><div class="flow absolute"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>Badge inside the card</h2><div class="card"><span class="badge">News</span><p>The badge sits at the top right of the card. Top padding separates it from the text.</p></div>
</body>
</html>

1. Compara la posición del siguiente elemento en las secciones estática y relativa. Incluso si el objetivo relativo se mueve hacia abajo 16px, el espacio de colocación para el elemento posterior se mantiene en relación con la posición original del objetivo. Confirma cambiando solo top a 0 y luego restáuralo a 16px.
2. Una sección absoluta saca el objetivo del flujo y coloca el siguiente elemento inmediatamente después del elemento anterior. Si cambias position de .absolute .target a static, la altura del contenedor aumentará según la altura del objetivo. Después de la comparación, restaura absolute.
3. Intenta eliminar solo position: relative de .card del distintivo de la tarjeta. Después de confirmar que el distintivo ya no está anclado en la esquina superior derecha de la tarjeta, recupéralo inmediatamente. Otras condiciones no cambian.
4. Alarga las letras del distintivo y verifica el espacio entre ellas y el texto principal. absolute no empuja automáticamente el cuerpo, así que si tu distintivo puede ocupar varias líneas, deberías considerar si el padding fijo por sí solo es suficiente. Después de practicar, vuelve a las letras originales.

Distingue desplazamiento fijo y adhesivo

fixed generalmente está anclado a la ventana gráfica, manteniendo su posición en la pantalla incluso cuando se desplaza el documento. Puede usarse para pequeños elementos operativos, como el enlace para volver al inicio, situado en la esquina inferior derecha de la pantalla. No ocupa espacio en el flujo, así que si tienes una barra fija, asegúrate de dejar suficiente espacio para que no oculte el final del texto del cuerpo y el elemento que recibe el foco.

El transform de un ancestro puede establecer el bloque contenedor para un descendiente fijo, reemplazando la referencia habitual de la ventana gráfica. Si un elemento fijo se mueve con una caja en particular, inspecciona las propiedades del ancestro, como transform y filter. Este ejemplo excluye esas propiedades para demostrar la posición respecto a la ventana gráfica.

Sticky requiere un valor de límite no automático, como top en el eje, para observar el efecto sticky. El título no está fijo en la pantalla desde el principio, sino que permanece en su propia posición de flujo y se adhiere cuando alcanza el borde superior al desplazarse. Cuando llega al final de su contenedor padre, se mueve a lo largo de sus límites y no continúa flotando sobre la siguiente sección.

sticky está influenciado por sus ancestros cercanos con mecanismo de desplazamiento. No solo overflow: auto y overflow: scroll, sino también overflow: hidden en un ancestro pueden afectar el comportamiento. Si el área de desplazamiento real es diferente del ancestro esperado, o la altura del contenedor y del título son similares y no hay espacio para el movimiento, la acción de adherencia puede no ser visible. En lugar de simplemente eliminar el overflow, primero verifica qué elementos tienen desplazamiento.

Observa el inicio de sticky y los límites del padre

Guarda el ejemplo como position-scroll.html. Un área introductoria de al menos 320px de alto mantiene el encabezado adhesivo por debajo de la parte superior de la ventana inicial. El capítulo y la sección siguiente tienen suficiente altura para observar cuándo comienza la adhesión y cuándo el límite del contenedor padre lo libera.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-scroll.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
body { margin: 0; padding-bottom: 80px; }
 .intro { min-height: 320px; padding: 24px; background: #eef2f6; }
 .chapter { min-height: 760px; background: #e8f5de; }
 .sticky { position: sticky; top: 0; margin: 0; padding: 16px; background: #dceefa; border-bottom: 2px solid #789; }
 .chapter p { padding: 16px; }
 .tail { min-height: 900px; padding: 24px; background: #fff2df; }
 .fixed { position: fixed; right: 16px; bottom: 16px; padding: 12px; background: #fff; border: 2px solid #145f8f; }
  </style>
</head>
<body>
<div class="intro" id="top"><h1>A heading that sticks while scrolling</h1><p>The heading below starts in normal flow. It sticks when it reaches the top of the screen and remains within its parent at the end of the chapter.</p></div>
<section class="chapter"><h2 class="sticky">Chapter heading</h2><p>This content is inside the chapter. The extra height lets you observe how long its heading remains sticky.</p></section>
<section class="tail"><h2>Another section</h2><p>Check whether the previous chapter's heading stays above this section.</p></section>
<a class="fixed" href="#top">Back to top</a>
</body>
</html>

1. Antes de desplazarte, comprueba de que el título esté por debajo del área introductoria. Desplázate hacia abajo lentamente para que el título se quede en su lugar cuando llegue a la parte superior de la pantalla. El enlace superior en la esquina inferior derecha está en la misma ubicación de la pantalla desde el principio.
2. Recorre el capítulo y continúa hasta la siguiente sección. El encabezado sticky deja de permanecer en la parte superior al alcanzar el límite inferior de su capítulo, pero los enlaces fijos permanecen visibles. Pulsa en el enlace para volver al área de introducción.
3. Si solo cambias top de .sticky a auto, no quedará un umbral de adherencia en el eje vertical y se desplazará como un flujo normal. Después de la confirmación, restaura a 0.
4. Simplemente agrega overflow: hidden a tu .chapter para ver los resultados de sticky al desplazarse la ventana cuando se cambia el ancestro más cercano con mecanismo de desplazamiento. Después de comparar, elimina la declaración agregada.

Diagnostica la posición inesperada

Si el orden de apilamiento no cambia incluso después de especificar la posición, consulta z-index y contextos de apilamiento con CSS.

1. Primero, verifica si queda espacio. La colocación de los elementos circundantes varía dependiendo de si son relativos/sticky o absolutos/fijos.
2. Verifica la posición real y los valores aplicados de top, right, bottom y left en las herramientas de desarrollo. También comprueba qué reglas y consultas de medios tienen precedencia.
3. Para absolute, identifica el ancestro de referencia; para fixed, las propiedades ancestrales que cambian el bloque contenedor. Para sticky, comprueba el umbral, el ancestro de desplazamiento, la altura del padre y el espacio disponible para moverse.
4. Si las coordenadas son correctas pero están ocultas, distingue entre un problema de ubicación y un orden de superposición/truncamiento por desbordamiento. Un z-index grande no resuelve todas las oclusiones.