After set z-index: 100 to .box-2 seems to work as expected: https://jsfiddle.net/4bk19ao6/
Solution 1 :
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: https://jsfiddle.net/shr9d2t8/2/
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: https://jsfiddle.net/vczmayf7/20/
What is going wrong?
Comments
Comment posted by Temani Afif
increase the z-index of box-2 (bootstrap add position:relative to all the col elements)