创建绝对定位的元素，但避免文字

Question

我需要动态创建元素（点）来装饰页面，但这些元素不能在文本上重叠（或其他具有特定类/ id的元素等）。创建此类元素的最佳方法是什么？

现在，我可以轻松创建点并将其附加到页面：

  const possiblePosition = [8.33, 16.66, 25, 33.33, 41.65, 49.98, 58.31, 66.64, 74.97, 83.33, 91.63]
  const dotsNumber = 10;

  function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function generateXY() {
    const coords = []
    for (var i = 0; i < dotsNumber; i++) {
      let randomX = possiblePosition[getRandomArbitrary(0, possiblePosition.length)]
      let randomY = possiblePosition[getRandomArbitrary(0, possiblePosition.length)]
      coords.push([randomX, randomY])
    }
    return coords
  }

  function createDots() {
    const coords = generateXY()
    for (let i = 0; i < dotsNumber; i++) {
      const dot = document.createElement("span")
      dot.classList.add("circle-dot");
      dot.style.position = "absolute";
      dot.style.top = coords[i][0] + "vw";
      dot.style.left = coords[i][1] + "vw";
      document.body.appendChild(dot)
    }
  }

当然，现在显示在随机位置，我正在寻找一种方法来检查潜在点位置下方是否有东西。