Solution 1 :

After set z-index: 100 to .box-2 seems to work as expected:

Problem :

I am having trouble with position: sticky.

I have three boxes one after another. Each box has a class container of Bootstrap The box-2 is desired to be fixed. So, I used position: sticky for the box-2. Things seem good.

Working Version:

However, when I actually use it in a real-world use-case with Bootstrap, where each box contains row and a col nested boxes, then the box-3 contents overlap over the box-2 while scrolling.

Problematic version:

What is going wrong?


Comment posted by Temani Afif

increase the z-index of box-2 (bootstrap add position:relative to all the col elements)