Maintaining small link image position when resizing browser

Hello yet again!!!
I am trying to keep a small png image (downward arrow icon over orange background image) in the same position relative to everything else around it when I resize the browser.

I’m not having much luck - tried variations on position: relative and absolute but it keeps messing up.

The arrow icon looks nice when viewed on my laptop but as soon as browser is resized it goes off for a wander!!! I’ve been reading through all the position tag info online but sadly I’m not as fast as these young whizzkids!!!

Here is a link to my code on github

and here is the page in browser

Another issue is that when scrolling down the image appears “over the top” of the nav bar! A nesting issue?

Thanks in advance to anyone who can suggest anything! :slight_smile:

thanks for a quick reply.

It still seems to be keeping position relative to top left corner.
Is there a way to get it to stay central to the page?
More google needed!!!

Enjoy your dinner! :hamburger:

I’ve sorted out the positioning
I added display: inline-block to the .arrow in CSS.

Just the issue now of the image appearing Over the Top of my header when scrolling…???