Javascript 如何避免固定顶部偏移的文本重叠

我试图在一个文本编辑器中添加注释，在该编辑器中，注释显示在已注释文本的旁边。为此，我使用了此函数：

jQuery( document ).ready(function() {
    jQuery(this).find('span.comment').each(function () {
        var id=jQuery(this).attr('data-id');
        var top=jQuery(this).offset().top - 40;
        jQuery(document).find('article[id="'+id+'"]').each(function () {
            jQuery(this).css('top',top);
        });
    });
});

在这个函数中，我检测注释文本的位置，并在相同的y位置添加注释

---

但是，当两个注释文本彼此接近时，注释重叠并且它们的文本不再可读，有没有办法避免这种情况或其他方法呢？？？

使注释容器可滚动（overflow-y:auto；），并将其最大高度设置为与注释文本高度相同。

欢迎使用堆栈溢出，你的问题应该包括。