Because <span> is natively an inline element, and margin has no effect.

Change your <span>s to <div>s.

A few things:

1. To use the top CSS property, the element needs to have a position defined. You can set that in the CSS (position: relative) or set it in the JS. (EDIT OP added CSS that they had already which set the position. Leaving this here for people that use top without setting an element's position)
2. You need to move the randomization into the forEach otherwise it will have the same value for all span elements
3. You need to attach the style prop to the element you are passing in the forEach, e.g., list.style.styleProp

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

randomize();

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

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