Positioning a GIF over an image using Javascript

This is my first post here so I hope I do it right.

I am currently building a portfolio website which has long panoramic photographs which are placed inside scrollable divs (https://tinyurl.com/z5xhzwue). I am trying to overlay a GIF over one of these photographs in an exact position on the photo. I think I will have to use JS because when I use CSS the positioning will only allow me to position it a number of pixels left/right of the screen.

var imageFive = document.getElementById(“Img5”).style.left = 500%
This code above works but the positioning will vary depending on the screen resolution. What I am trying to achieve is using .style.left in the same way as I have scrolled left with the script below.

var imageThree = document.getElementById(‘Img3’)
var widthImg3 = imageThree.clientWidth;
const Img3El = document.querySelector(‘#Div3’);
Img3El.scrollLeft = widthImg3/1.26;
So to summarise I would like to style.left Img5 by a fraction of Img3 but I can’t quite work out how to write the script.

Thank you, and I hope this post made enough sense for you guys to help me <3.