Veamos lo que es un elemento con position: sticky
:
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a su ancestro que se desplace más cercano y su bloque contenedor (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de top, right, bottom, y left. El desplazamiento no afecta la posición de ningún otro elemento.
Ahora veamos una imagen con lo que está sucediendo con el elemento padre (another-container
) y el elemento hijo (card-sticky
):

¡El elemento hijo ya ocupa todo el espacio de su padre!
Esto es debido a que another-container
es un elemento en bloque, ocupa todo el width
que puede, pero no hemos especificado el height
, por lo que ocupará lo que ocupe su elemento hijo, así que el hijo no se puede mover dentro de su contenedor.
¿Cómo soluciono esto?
Añadiendo un height
al elemento padre, para que su hijo puede desplazarse dentro de él:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<div class="app-content">
<div class="another-container">
<div class="card-sticky">
Sticky card
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.container{
height: 200vh;
}
/*código nuevo*/
.another-container{
height:100vh;
/*Ahora card-sticky tendrá espacio para moverse :)*/
/*si quieres que se desplaze por toda la pantalla, le pones
el height del ancestro que ya lo tiene definido, en este caso .container*/
}
/*código nuevo*/
.card-sticky {
position: sticky;
top: 0;
}
</style>
Al llegar al final del height
(100vh) se deja de mover el elemento hijo, pues ya alcanzó el final de su elemento padre. Al principio de todo, el final del padre era el mismo final del hijo, pero al hacer al elemento padre más alto que el elemento hijo, este ya pudo desplazarse libremente dentro de su ancestro.
Es decir, tener múltiples contenedores no es la causa, sino el hecho de no declarar un height mayor al del contenido (o height
) que ocupe el hijo, lo que hace que no pueda desplazarse dentro del padre
display:flex
? Como sugerencia es mejor poner el el codigo aqui y adjuntar el link de tu ejemplo.