JavaScript only affecting every other element in array

I have a series of elements that I'm loading in random positions on the page. The problem is that my js is only randomizing every other element. I've seen a handful of questions / answers about this online, but haven't been able to wrap my head around how to implement the answers with my problem (bit of a noob).

markup:

<div id="a" class="rando ui-widget-content">
    <iframe width="200" height="250" src="someURL" frameborder="0" ></iframe>
</div>

<div id="b" class="rando ui-widget-content">
    <img src="someURL" alt="someURL" itemprop="image">
</div>

<div id="c" class="rando ui-widget-content">
    <a href="someURL" title="someURL" target="_blank"><canvas id="someCanvas"></canvas></a>
</div>

JS:

function getRandomPosition(element) {
  var x = document.body.offsetHeight - element.clientHeight;
  var y = document.body.offsetWidth - element.clientWidth;
  var randomX = Math.floor(Math.random() * x);
  var randomY = Math.floor(Math.random() * y);
  var randomZ = Math.floor(Math.random() * 256);
  return [randomX,randomY,randomZ];
}

window.onload = function() {
  const rpos = document.getElementsByClassName("rando");
  for (let rpo of rpos) {
    rpo.setAttribute("style", "position:absolute;");
    document.body.appendChild(rpo);
    var xy = getRandomPosition(rpo);
    rpo.style.top = xy[0] + "px";
    rpo.style.left = xy[1] + "px";
    rpo.style.zIndex = xy[2];
  }
};

Any help or direction toward finding out how to hit every element in the array is, as always, greatly appreciated!