Position: Sticky Is Not Working With Top Property?

Position: sticky with bottom:10px on div with class sidebar is working as expected but with property top:10px is not working as expected? With position: sticky with bottom: 10px on

Solution 1:

In my case, the parent of the sticky element (the sidebar) had a smaller height than the content => the sticky element wasn't going down more than the sidebar's height.

The solution: I made the sidebar's height equal to the content's height (using display flex on the content's and sidebar's wrapper).

HTML:

<divclas="container"><divclass="content">This initially has a bigger height than sidebar.</div><divclass="sidebar"><divclass="sticky"></div></div></div>

CSS:

.container { dislay: flex; } // By using this I make the sidebar the same height as the content.sticky { position: sticky; top: 0; }