The position of the object changed by the JS function?

Question

I have a problem, before adding the JS, just with the HTML and CSS, the two images overlapped well but since I added this function to my code, the concerned image (icon-cart-white) is no longer arranged in the same position and I do not know what to change so that it returns to normal, if you know how to fix this problem I would be very grateful. Thank you

This is before i add the JS

This is after i add the JS

HTML (before the JS) :

<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart"> 
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">


HTML (with the JS) :

<iconcart id="iconcart">
    <img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart"> 
</iconcart>

<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">

CSS :

.calebasse-icon-cart-white {
  position: absolute;
  width: 75%;
  height: 75%;
  z-index: 2;
}

.calebasse-icon-cart-black {
  position: absolute;
  width: 75%;
  height: 75%;
  z-index: 1;
}

JS :

let iconcart = document.getElementById('iconcart');

document.addEventListener('scroll', function() {

    let scrollPosition = window.pageYOffset;

    if (scrollPosition <= 50) {
        iconcart.style.opacity = 1 - scrollPosition / 50;
    } else {
        iconcart.style.opacity = 0;
    }
});

I tried to change the position: absolute; to position: relative; to solve the problem but it wasn't better, i thought the problem was the CSS but in fact in not really sure, it can also be the JS.

Answer 1

Solved. Instead of creating tag i just put the id in the tag and it worked, I don't really know why but it's fine for me. Thank you Pete for helping me with the Minimal, reproducible example article.