这个绝对定位的元素不是位于它最近的祖先旁边，而是附着在文档正文上，我想知道为什么

Question

注意：我无法在tutorialspoint的编码地或w3schools Tryit编辑器上获得完整的页面功能，而且我不喜欢jsfiddle。我会尝试在此处添加适用的信息，这样您就不必下载网站并打开索引页面。但如果我的解释不足以传达问题here是我项目的压缩文件。单击“生成”然后单击中间日文字符时，可以看到问题。

问题

我工作的网站通过将日文字符放入左侧文本区域来工作，然后通过按下生成按钮，将在页面中间创建新元素。
我不打算在这里添加生成函数的代码，因为这篇文章要花多长时间。但这里显示了绝对元素的功能：

setInterval(function (event) {
    $('[id*=jap_word]').click(function () {
        var newId = this.id;
        var toShow = "words_info" + newId.slice(8);
        if (document.getElementById(toShow).style.display == "none") {
            document.getElementById(toShow).style.display = "inline";
        } else {
            document.getElementById(toShow).style.display = "none";
        }
        event.stopImmediatePropagation();
        });
}, 500);

这是Firefox Quantum检查员的图片，显示了创建的元素：

现在，当我单击所选的选择器ID并使其显示为内联时，它会将words_info元素附加到文档正文而不是最近的祖先。

这里是w3schools的引用：

  

位置：绝对;

     

位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

     

然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

所以我可以看到它的显示是绝对的，我可以看到它在点击jquery选择器后变得可见，我可以看到绝对元素有祖先。有人可以帮我弄清楚它为什么不显示在父div旁边吗？

Answer 1

您缺少的部分是：

  

位置为绝对的元素;相对于最近的 定位 祖先（而不是相对于视口定位，如固定）。

words_info元素具有祖先，但它没有任何定位的祖先（包含position: relative，position: absolute或position: fixed的元素）。所以这是默认的：

  

然而; 如果绝对定位元素没有定位祖先 ，它会使用文档正文，并随页面滚动一起移动。