我有一个问题，在添加JS之前，只是HTML和CSS，两个图像重叠得很好，但自从我添加了这个函数到我的代码，有关的图像（icon-cart-white）不再安排在相同的位置，我不知道如何改变，使它恢复正常，如果你知道如何解决这个问题，我将非常感激。谢谢
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;
    }
});

我试着把position: absolute;改成position: relative;来解决这个问题，但效果并不好，我以为问题出在CSS上，但事实上我不确定，也可能是JS。