Javascript 结合碰撞检测移动包含文本的div

我的客户要求在屏幕上显示赞助商名称（最多20个），并且赞助商名称不得重叠。每个名称的字体大小略有不同，页面加载中每个名称的初始起始位置应该是随机的。我以前从未做过这样的事。我在考虑将赞助商名称放在div或span标记中，然后在这些容器上执行所需的逻辑，以便更容易地定义边界。我希望通过使用setTimeout（）或JS插件（如果有的话）来移动div，并在名称冲突检测方面寻求帮助。我也对基于CSS转换的解决方案持开放态度，因为它将是一个独立的安装，我们可以完全控制所使用的浏览器，等等

一旦达到这些效果，我将使用页面转换或impress.js放大详细的赞助商信息页面，并返回到相同的概览移动文本页面。不过，我应该可以自己处理这部分

---

提前感谢您提供的任何帮助。

步骤：1.将内容放入div/span：正确2.使用setTimeout：不正确。因为您永远不知道元素a的位置。建议：使用jquery animate触发动画完成事件3。碰撞检测：在开始动画之前，为每个元素确定一条路径，确保在给定的时间内，这些路径不会与碰撞检测相一致，您能否给出一个实际的代码示例，说明如何检查路径是否交叉？我需要考虑完整的div，而不仅仅是中心坐标或左上角。