Prevent fixed elements from overlapping

Hi everyone

I have a fixed ad banner positioned in the top right corner of my website. When the site scales down responsively, the banner starts to overlap other elements. Does anyone know a good way to prevent that?

Thanks in advance for your tips!

Hi, @user6504 !!

I feel that the meaning of “fixed” changes depending on whether it’s docked to the edge of the screen or pinned to the page. If it’s merely docked, it seems like it could be resolved by stacking it with the surrounding elements. However, if it’s pinned, it will basically overlap with other content. :innocent:

Maybe I understood you wrong, but I would like the element to stay in place and not scroll with the website. Is there a way both to pin it (prevent vanishing when scrolling down) and prevent overlapping?

Best

Does that mean pinning it wouldn’t meet your requirements?

It would, but if users narrow the browser window, the ad soon covers up the actual content.

I see :innocent: , so you’re displaying ads. In that case, how about keeping them pinned but hiding them when the screen is resized to a smaller view? I’m guessing those ads are meant for desktop screens, right? You could also consider showing ads for smaller screen sizes using a different approach. :raising_hands: