title: issues with z-index and multiple !important rules
body: <p>Has anyone ever encountered a case where a more specific <code>!important</code> declaration is not overwriting another <code>!important</code> declaration? Here is the base css:</p>
  
  <pre><code>.x-floating {
    position: absolute !important;
    z-index: 10000 !important;
  }
  </code></pre>
  
  <p>And here is what I want to use to override the z-index:</p>
  
  <pre><code>.x-msgbox.x-floating {
    z-index: 10001 !important;
  }
  </code></pre>
  
  <p>When I inspect via the Chrome (or Safari) debugger on Windows, I see the <code>.x-msgbox.x-floating</code> declaration being overwritten (crossed out), and the <code>x-floating</code> declaration being active. This goes against what I know of css specificity, and what I expect from <a href="http://jsfiddle.net/theazureshadow/Vpb6M/2/" rel="nofollow">simplified tests</a>.</p>
  
  <p><strong>Example code:</strong></p>
  
  <p>Since I'm using Sencha, this will only work in Chrome or Safari, but here's a <a href="http://jsfiddle.net/theazureshadow/yFnGU/2/" rel="nofollow">jsFiddle link</a> (perhaps not kosher to hotlink Sencha's source, but this'll never get enough views for it to matter at all). To run the test, click the "choose date" button, then spin one of the wheels by dragging. A message box will appear. Compare the message box with the date picker (the top level elements of each &mdash; children of the body; another way to do it is to look for elements with class <code>x-floating</code>).</p>