1

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?

SimpleGuy
  • 2,764
  • 5
  • 28
  • 45

1 Answers1

1

After set z-index: 100 to .box-2 seems to work as expected: https://jsfiddle.net/4bk19ao6/

alexojegu
  • 754
  • 7
  • 21