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 幫助我完成了最小的、可重現的示例文章。