issues with z-index and multiple !important rules

Question

Has anyone ever encountered a case where a more specific !important declaration is not overwriting another !important declaration? Here is the base css:

.x-floating {
  position: absolute !important;
  z-index: 10000 !important;
}

And here is what I want to use to override the z-index:

.x-msgbox.x-floating {
  z-index: 10001 !important;
}

When I inspect via the Chrome (or Safari) debugger on Windows, I see the .x-msgbox.x-floating declaration being overwritten (crossed out), and the x-floating declaration being active. This goes against what I know of css specificity, and what I expect from simplified tests.

Example code:

Since I'm using Sencha, this will only work in Chrome or Safari, but here's a jsFiddle link (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 — children of the body; another way to do it is to look for elements with class x-floating).

Answer 1

Default position is static. In static position can´t use z-index.

.x-msgbox.x-floating {
  position: relative;
  z-index: 10001 !important;
}