¿Qué características de la propiedad position: sticky conoces?

position: sticky – es un híbrido entre position: relative y position: fixed.

• Comportamiento por defecto: El elemento se comporta como con position: relative, permaneciendo en el flujo normal del documento.
• Al desplazarse: Cuando el elemento alcanza un desplazamiento definido (por ejemplo, top: 0) respecto a su contenedor de desplazamiento o área de vista (viewport), se "pega" y se comporta como con position: fixed, permaneciendo visible en esa posición al seguir desplazándose.
• Desplazamiento: Se establece mediante las propiedades top, right, bottom, left. Es necesario usar al menos una de estas propiedades para que sticky funcione correctamente.
• Contenedor de desplazamiento (scroll container/containing block): El elemento "se pega" dentro de su bloque de formato padre (containing block), que generalmente coincide con el antecesor más cercano que tenga capacidad de desplazamiento o un contexto de formato definido. Si solo se desplaza body/html, el pegado será respecto al área de vista.
• Superposición: El elemento pegajoso puede superponer el contenido debajo de él, similar a un elemento con position: fixed.
• Z-índice: El comportamiento en superposiciones está influenciado por la propiedad z-index.
• Restricciones:
  • No funciona si el elemento padre tiene overflow: hidden, overflow: auto o overflow: scroll, que recortan el contenido.
  • El elemento puede "despegarse" si alcanza el borde de su contenedor de desplazamiento.
• Uso: Se emplea frecuentemente para crear encabezados "pegajosos" en tablas, paneles de navegación o elementos laterales que permanecen visibles al desplazarse por el contenido principal.

/* Ejemplo de uso */
.sticky-header {
  position: sticky;
  top: 0; /* Se pega a la parte superior del viewport o contenedor */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Asegura que el encabezado esté por encima de otros contenidos */
}