title: CSS hover box position issue
body: <p>Currently I'm using following CSS to show a hover box:</p>
  
  <pre><code>.box {
      width: 500px;
      padding: 3px;
      background: #404040;
      color: #fff;
      font: normal 12px Arial, Sans-serif;
      position: absolute;
  }
  </code></pre>
  
  <p>the javascript function:</p>
  
  <pre><code>function showBox(i,j){
                  if(i==1){
                      document.getElementById("box"+j).style.display='block';
                  } else if(i==2) {
                      document.getElementById("box"+j).style.display='none';
                  }
              }
  </code></pre>
  
  <p>the html code:</p>
  
  <pre><code>&lt;div style="height:175px;overflow:auto;"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1"&gt;Hover Me 1&lt;/p&gt;
                                      &lt;div id="box1" class="box"&gt;I'm hover box 1.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2"&gt;Hover Me 2&lt;/p&gt;
                                      &lt;div id="box2" class="box"&gt;I'm hover box 2.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3"&gt;Hover Me 3&lt;/p&gt;
                                      &lt;div id="box3" class="box"&gt;I'm hover box 3.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4"&gt;Hover Me 4 &lt;/p&gt;
                                      &lt;div id="box4" class="box"&gt;I'm hover box 4.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5"&gt;Hover Me 5&lt;/p&gt;
                                      &lt;div id="box5" class="box"&gt;I'm hover box 5.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6"&gt;Hover Me 6&lt;/p&gt;
                                      &lt;div id="box6" class="box"&gt;I'm hover box 6.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7"&gt;Hover Me 7&lt;/p&gt;
                                      &lt;div id="box7" class="box"&gt;I'm hover box 7.&lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>If you run this you will find that a hover box is appeared when you hover on any "Hover ME X" text. This works fine until you have not scrolled down in div. When you scrolled down in div the hover box is showing in wrong position. How can I overcome this issue?</p>