title: CSS :hover Within an 'absolute' Positioned Element
body: <p>I've got a friend, mrOverAbsolute, who wants to sit on top of another friend, mrAbsolute. Neither one seems to complain. I've got another friend,  who responds to "mrHover" that wants to use a sprite. mrHover is only happy when the big dogs, mrHover and mrOverHover aren't so absolute. </p>
  
  <p>Here's the drama:</p>
  
  <pre><code>&lt;style&gt;
  div#mrOverAbsolute
  {
    z-index:1;
    /* ... and some other stuff */
  }
  div#mrAbsolute
  {
    position:absolute;
    z-index:-1;
    /* ... and some other stuff */
  }
  a.mrHover
  {
    background:url('mrImage') 0 0;
  }
  a.mrHover:hover
  {
    background-position:0 25;
  }
  &lt;/style&gt;
  
  &lt;div id="mrOverAbsolute"&gt;&lt;/div&gt;
  &lt;div id="mrAbsolute"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;a href="" class="mrHover"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Okay okay -- friends aside -- if I remove "position:absolute;", the sprite works. Otherwise, Chrome ignores the fact that I've declared a ":hover" in CSS.</p>
  
  <p>Any suggestions?</p>