JS函数改变了对象的位置？答案

【问题标题】：The position of the object changed by the JS function?JS函数改变了对象的位置？
【发布时间】：2023-01-17 23:32:34
【问题描述】：

我有一个问题，在添加 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。

【问题讨论】：

可能是 iconcart 元素正在创建一些导致问题的额外元素吗？您应该检查元素并查看发生了什么。否则您将需要创建一个 minimal reproducible example 来演示该问题，因为我们提供的任何答案都只是对您提供的代码的猜测

标签： javascript html css position css-position

【解决方案1】：

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

【讨论】：