object的position被JS改成了function？

Question

我有一个问题，在添加 JS 之前，只有 HTML 和 CSS，这两个图像重叠得很好，但是自从我将这个 function 添加到我的代码中后，相关图像（icon-cart-white）不再排列在同一个 position 中而且我不知道要更改什么才能恢复正常，如果您知道如何解决此问题，我将不胜感激。 谢谢

这是在我添加 JS 之前

这是在我添加 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的问题。

Answer 1

解决了。 我没有创建标签，而是将 id 放在标签中并且它起作用了，我真的不知道为什么，但这对我来说很好。 感谢 Pete 帮助我完成了最小的、可重现的示例文章。