I'm struggling with the CSS property position: sticky.
In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To achieve this, I applied the position: sticky property to it, which initially seemed to work fine.
Here is the working version for reference: https://jsfiddle.net/shr9d2t8/2/
However, when implementing this setup within a real-world scenario using Bootstrap, where each box includes nested elements like row and col, a problem arises. As you scroll through the page, the contents of box-3 start overlapping with box-2.
View the problematic version here: https://jsfiddle.net/vczmayf7/20/
Why is this happening? What could be causing this issue?