There is a very strange issue that I am seeing over my site that when ever I am adding the overflow: hidden; and background: rgba(0, 0, 0, 0.5); on the mini cart popup(when it is open) the overlay and background is not applying on the entire page as on product page some of the element is above the background color and on homepage background color is not applying to the header and the hero image, I have tried z-index as well but nothing is happening.
I have applied overflow on the click of the mini cart button and adding active class to body when the mini cart popup is open.
Here is the screen shots of what I am seeing here I have added background colour on body when the active class is there.
here you can see that the background color is not working on the header and hero image, but I want when the mini cart popup is open the overlay should cover the entire background with grey colour.
I am not sure why it's happening and searched a lot over internet but didn't able to find the solution for the same.
Can anyone help me on this and why it's happening?
Thanks