unity canvas, small child image of large background image should behave as if it was part of background (responsiveness)

Hello, for almost a week I have tried to achieve cutting out elements from a very large and wide image, for the intention of re-adding them as unity children of the very same image, this should look exactly as if they were still part of the large background image, no matter what screen ratio or size we are looking at. The reason for this is that I want them to gain some individual properties such as clickable and eventually add movement scripting/animations to each one of them. The image is a "map" of an ocean, the map is very wide (ratio 8.25). The map must be inside a canvas and at all given time bottom of the map should be fixed to the bottom of the canvas, same goes for top fixed to top. This means, that on wide screen such as mobile phones, 20% part from the left of the map should be visible, 80% parts to the right will exceed the canvas view. On more squared screen you will then see even less of the maps width, but this is okay, since I want to make it scroll/drag -able horizontally. Attempts: I have tried many different approaches for this to work, first attempt was inside a scroll view, where I am using vertical layout, with the following setting I then set the map as the only child of the scroll view, and with these setting it is fixed top to top, bottom to bottom. I can nicely scroll it horizontally to view when is otherwise exceeding the canvas and by the explorer the entire map regardless of screen size and ratio, very nice responsiveness! However, one of the elements that I cut out of the original image is a banner above the first island "infinity island" I have tried to add it as a child to the map, but no matter what settings I give it, anchor settings and with assistance of aspect ratio fitter, scale constraint, position constraint etc. Nothing seems to do the trick, no matter what i try it will either move out of position or scale, and move away from its inteded position when i resize the screen

I believe this is because when I position it relative the the parent I am defining the Rect Transform position with pixels and not percentage of parent height/width. If I could say 10% to the right from the left, then no matter how I resize the canvas it should always be 10%. Another way to think of a solution is to make a image exactly same dimensions as the background map image, with all pixels transparent, and then add in the banner as the only visible pixels, scaled and positioned correctly in relation to the map (like photoshop layers individually exported). If I then made that image as child of the map, and gave it stretch anchor properties, it would always follow the position and scaling behavior as the background, BUT then I wont be able to make it clickable in only the banner area. Another attempt have been to do it without vertical layout and without scroll view, Just use of a canvas that is screen overlay so it always matches the screen. I then put the map as child, anchor is to point left, stretch height. I then added aspect ratio fitter, with options height controls width, set the ratio as the ratio of the image, this forces it to be correct ratio and bottom to top always match canvas bottom to top. However, no matter what setting is give the banner (child) it scales wrong and gets out of position. How can the desirec behavior be achieved?

Download tiny project containing these canvases: Download zip from filerdropper or from uifile.io (expires in 30 days)