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:

<div clas="container">
    <div class="content">This initially has a bigger height than sidebar.</div>
    <div class="sidebar">
        <div class="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; }