如何使用 CSS 和算法优化实现 Word 式批注间距自适应？
网页定位问题：批注间距自适应
在设计类似 Word 的批注功能时，如果希望实现像 Word 中一样的批注间距效果，需要解决以下两种情况下的批注定位问题：
- 批注间隔较大的情况：就近原则显示
对于相距较远的批注，应将批注定位在靠近批注文本的位置。
- 批注紧挨在一起的情况：自适应紧挨，避免重叠
当批注紧挨在一起时，需要自适应调整批注位置，以避免相互重叠。
解决思路：
可以使用 CSS 中的 absolute 定位来实现批注的定位。然后，按批注从上到下的顺序统计其 top 和 height 值，并计算出每个批注的最大 top 值。
数据结构：
[
{top: 100, height: 200},
{top: 800, height: 200},
{top: 820, height: 200},
{top: 1020, height: 200},
]
算法优化：
使用 reduce 方法计算最大 top 值：
arr.reduce((s, n, i) => {
n.currentTop = Math.max(n.top, (s.currentTop || s.top) + s.height)
return n
})
示例：
arr = [
{top: 100, height: 200},
{top: 800, height: 200},
{top: 820, height: 200},
{top: 1020, height: 200},
{top: 1430, height: 180},
]
arr.reduce((s, n, i) => {
n.currentTop = Math.max(n.top, (s.currentTop || s.top) + s.height)
return n
})
console.log(arr)
输出结果：
[
{top: 100, height: 200, currentTop: 100},
{top: 800, height: 200, currentTop: 1000},
{top: 820, height: 200, currentTop: 1020},
{top: 1020, height: 200, currentTop: 1220},
{top: 1430, height: 180, currentTop: 1430}
]
通过这种方法可以实现批注间距的自适应调整，解决文中提出的定位问题。