title: Positioning an element outside the containing element
body: <p>I have a webpage with code I cannot change which is set up something like this:</p>
  <pre><code>&lt;table style=&quot;width: 750px; margin-left: auto; margin-right: auto&quot;&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;&lt;div id=1&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;div id=2&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;div id=3&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;div id=4&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I'd like to add an element (via userscript) to the right of the outer table which lines up with <code>div</code> 1, 2, 3, or 4. Is there a way to do this? Maybe measure the current position of the elements then absolutely position relative to the outer table?</p>
  <p>(The actual HTML is far more messy; there are many more siblings and parents, but this is the heart of the code.)</p>