title: Keeping a div:hover always in front
body: <p>one question about keeping hovered div's content always visible.</p>
  
  <p>I do have a large Grid made of td's. When hovering over each td i want to display an infobox containing additional data about that td. Current Code:</p>
  
  <p><a href="http://jsfiddle.net/KrU6m/" rel="nofollow noreferrer">JS-Fiddle</a></p>
  
  <pre class="lang-css prettyprint-override"><code>#Grid {
  }
  .Field {
      border:thin solid black;
      width:30px;
      height:30px;
      float:left;
      background-color:blue;
      position:relative;
      z-index:0;
  }
  .FieldOverview {
      display:none;
  }
  .Field:hover {
      background-color:red;
  }
  .Field:hover .FieldOverview {
      display:block;
      position:absolute;
      top:10px;
      left:10px;
      width:100px;
      height:100px;
      border:thin solid black;
      background-color:red;
      z-index:1;
  }
  </code></pre>
  
  <p>My Problem is, that the hover-info-box isn't correctly displayed. I tried to add a z-index to make sure the info box is always shown before the other td's but it doesnt work. I also looked at those Questions, but they didn't quite give me what i needed:</p>
  
  <p><a href="https://stackoverflow.com/questions/16106650/css-menu-keep-parent-hovered-while-focus-on-submenu?lq=1">Here</a> and <a href="https://stackoverflow.com/questions/7340679/css-hover-menu-getting-hovered-menu-item-to-keep-hovered-state-css">Here</a></p>
  
  <p>The 2nd Problem i have is that when hovering over a td I want to keep the popping up infobox when the mouse moves into the infobox itself. Currently when moving the mouse in the popping up infobox once the mouse comes over a different td the current infobox is set again to display:none and the infobox of the new td is displayed.</p>
  
  <p>I hope someone of you knows how to accomplish this.</p>