When I work on using a sticky position, there are a few cases in which I am confused. So through this article, I will tell you a few instances that you should tackle when a sticky position does not work.

There are multiple nested divs.

To generate this issue, I created a sample here. In this example, two div tags are nested. Why doesn’t the sticky position work? The reason is both the first div and the second div have the overflow-y: scroll value. So if you remove the second div’s value, it should work

No defined height in the wrapper.

To make an element sticky, you must know that the element targets the nearest scrolling ancestor and containing block.

So the nearest scrolling ancestor must have a specified height to be scrollable. Suppose you set the height as auto. It won’t work, too. In this example, I removed the height of the nearest ancestor of the sticky element, and then its height takes the full height of wrapped contents that means it is not scrollable.

I summarized a few instances you might face when you work on a sticky position element through these examples. I hope that this is useful for your front-end development.