title: This absolute positioned element is not positioned next to it's nearest ancestor and instead attached to the document body and I'm wondering why
body: <p><strong>Note</strong>: I couldn't get the full pages features to replicate on tutorialspoint's coding ground or w3schools Tryit editor and I don't like jsfiddle. I'll try and add the applicable info here so you don't have to download the website and open the index page. But if my explanation isn't enough to convey the problem <a href="https://drive.google.com/file/d/1QHeuf_0U_DUTLHP3DUp2Z9_dACQaq9sh/view?usp=sharing" rel="nofollow noreferrer">here</a> are the zipped files of my project. You can see the problem when you click generate and then click on the middle Japanese character.</p>
  <hr>
  <h1>The Problem</h1>
  <p>The site I'm working on works by putting Japanese characters into the left hand textarea and then, by pressing the generate button, new elements will be created in the middle of the page. <br />
  I'm not going to add the code for the generation function here because of how long it would make this post. But here's the function to show the absolute element:</p>
  <pre><code>setInterval(function (event) {
      $('[id*=jap_word]').click(function () {
          var newId = this.id;
          var toShow = &quot;words_info&quot; + newId.slice(8);
          if (document.getElementById(toShow).style.display == &quot;none&quot;) {
              document.getElementById(toShow).style.display = &quot;inline&quot;;
          } else {
              document.getElementById(toShow).style.display = &quot;none&quot;;
          }
          event.stopImmediatePropagation();
          });
  }, 500);
  </code></pre>
  <p>This is a picture of the Firefox Quantum's inspector showing the created elements:</p>
  <p><a href="https://i.stack.imgur.com/enQB4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enQB4.jpg" alt="Image" /></a></p>
  <p>Now when I click the chosen selector id and have it display inline it attaches the words_info element to the document body instead of the nearest ancestor. <br /><br />Here's a quote from w3schools:</p>
  <blockquote>
  <p>position: absolute;</p>
  <p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).</p>
  <p>However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.</p>
  </blockquote>
  <p>So I can see that it's display is absolute, I can see that it becomes visible after I click the jquery selector, and I can see that the absolute element has ancestors. Can someone please help me figure out why it's not displaying next to the parent div?</p>