Why does Z-Index above '5' cause title-card to move with scroll?

[Toptoys2uHS]

Hello All,

I am having some trouble with a Z-Index at the moment on a grid element with some title-cards.

Whenever I add a Z-Index above “5” on a card title, the position of the title-card seems to get “unstuck” and moves at the same position of the scroll, making it eventually go underneath the navigation bar and not retain itself within the grid which is not useful.

Would anyone be able to explain what is happening and resolve this issue?

I have attached screenshots below for reference which works on number “23” of the title cards.

Would anyone be able to explain why number “23” does not stay with the rest of the numbers during a scroll?

The link to the issue can be found on here https://toptoys2u.co.uk/pages/advent-calendar

I appreciate any help!

[theycallmemakka]

Hi @Toptoys2uHS ,

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code just above tag

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka