如何实现多个Div元素随机布局且避免重叠，并支持点击置顶和关闭功能？

<code class="javascript">const container = document.getElementById('container'); // 容器元素
const minDistance = 50; // 元素之间的最小距离

function generateRandomPosition(width, height, elementWidth, elementHeight) {
  const x = Math.random() * (width - elementWidth);
  const y = Math.random() * (height - elementHeight);
  return { x, y };
}

function isCollision(pos1, size1, pos2, size2) {
  return (
    pos1.x < pos2.x + size2.width &&
    pos1.x + size1.width > pos2.x &&
    pos1.y < pos2.y + size2.height &&
    pos1.y + size1.height > pos2.y
  );
}

function createDiv(text) {
  const div = document.createElement('div');
  div.textContent = text;
  div.style.position = 'absolute';
  div.style.padding = '10px';
  div.style.border = '1px solid #ccc';
  div.style.backgroundColor = '#f0f0f0';
  div.style.cursor = 'pointer';

  const closeBtn = document.createElement('span');
  closeBtn.textContent = '×';
  closeBtn.style.float = 'right';
  closeBtn.style.cursor = 'pointer';
  closeBtn.onclick = () => container.removeChild(div);
  div.appendChild(closeBtn);

  div.onclick = () => {
    div.style.zIndex = ++zIndexValue;
  };

  return div;
}


let zIndexValue = 0;
const numDivs = 10; // 创建10个Div

for (let i = 0; i < numDivs; i++) {
  let position;
  let collision = true;
  while (collision) {
    position = generateRandomPosition(
      container.clientWidth,
      container.clientHeight,
      100, // Div宽度
      50  // Div高度
    );
    collision = false;
    const existingDivs = container.querySelectorAll('div');
    existingDivs.forEach(div => {
      const divPos = { x: div.offsetLeft, y: div.offsetTop };
      const divSize = { width: div.offsetWidth, height: div.offsetHeight };
      if (isCollision(position, {width: 100, height: 50}, divPos, divSize) ||
          Math.sqrt(Math.pow(position.x - divPos.x, 2) + Math.pow(position.y - divPos.y, 2)) < minDistance) {
        collision = true;
      }
    });
  }
  const div = createDiv(`Div ${i + 1}`);
  div.style.left = `${position.x}px`;
  div.style.top = `${position.y}px`;
  container.appendChild(div);
}</code>

<code class="html"><div id="container"></div></code>