为何绝对定位元素的随机top边距函数无法正常生效？

开发HTML页面时，需要实现对每个图层的top边距属性随机赋值的效果，现有代码运行后未达到预期，需定位错误点并给出可行解决方案。

JavaScript 代码 #

function randomize() {
  let r;
  let list = document.querySelectorAll("span");
  for (let i = 0; i < list.length; i++) {
    r = Math.floor(Math.random() * 50);
    list.forEach((list) => {
      style.top = `${r} + px`;
    });
  }
}

CSS 代码 #

span {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  z-index: -2;
}

HTML 代码 #

<div class="parallax">
  <span class="layer" data-speed="-5">10110</span>
  <span class="layer" data-speed="-5">0</span>
</div>

按运行顺序逐点校验可定位以下错误：

• 语法报错：代码直接调用style.top，没有绑定到具体DOM元素实例，JS执行时会抛出style is not defined的引用错误，逻辑直接中断
• 循环逻辑冗余冲突：外层用for循环遍历span集合，内层又嵌套forEach遍历同一个集合，总执行次数是元素数的平方，且所有元素最终只会拿到最后一次循环生成的随机值，无法实现每个元素独立随机top值的效果
• 变量命名冲突：forEach回调的参数命名和外层集合变量list重名，会覆盖外层集合引用，提高调试成本
• CSS属性值无效：模板字符串写为`${r} + px`，会把多余的+符号拼接进属性值，最终生成类似"20 + px"的无效值，浏览器无法解析
• 逻辑未触发：仅定义了randomize函数，没有在页面加载完成后调用，函数内逻辑根本不会执行
• 定位参照缺失：父容器.parallax没有设置定位属性，内部绝对定位的span会默认相对于整个视口计算top值，不符合图层相对容器定位的预期

JavaScript 代码 #

function randomize() {
  const layerList = document.querySelectorAll("span");
  // 直接遍历元素集合，给每个元素单独生成随机值
  layerList.forEach(layer => {
    const randomTop = Math.floor(Math.random() * 50);
    // 绑定到当前元素的style对象，正确拼接数值和单位
    layer.style.top = `${randomTop}px`;
  });
}
// DOM加载完成后执行随机赋值
document.addEventListener('DOMContentLoaded', randomize);

CSS 代码 #

.parallax {
  /* 给容器设置相对定位，作为内部绝对定位元素的定位参照 */
  position: relative;
  width: 100%;
  min-height: 200px;
}
span {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  z-index: -2;
}

HTML 代码 #

和原有结构一致无需修改：

<div class="parallax">
  <span class="layer" data-speed="-5">10110</span>
  <span class="layer" data-speed="-5">0</span>
</div>

内容的提问来源于stack exchange，提问作者glpsx