I have a top floating stripe with an non-white background. (1600 pixel screen width) In front of it, I have a top floating group with some text, buttons etc. with a transparent background (full width i.e. 1200 pixel).
When I scroll down the elements in rest of page below scroll over / under the floating group. The only way i can avoid this is to set an opaque background on the floating group. But this leads to bad UI as 1200px width will be opaque and rest of width will be different color of the stripe.
See screenshots below. How do I avoid this effect ?
Top of page before scroll:
Top of page after scroll: