css - z-index 和多个 !important 规则的问题

Question

有没有人遇到过更具体的 !important 声明没有覆盖另一个 !important 声明的情况？这是基本的 CSS:

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

这是我想用来覆盖 z-index 的内容:

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

当我通过 Windows 上的 Chrome(或 Safari)调试器进行检查时，我看到 .x-msgbox.x-floating 声明被覆盖(划掉)，并且 x- float 声明处于事件状态。这违背了我对 css 特异性的了解，以及我对 simplified tests 的期望。 .

示例代码:

由于我使用的是 Sencha，这只能在 Chrome 或 Safari 中使用，但这里有一个 jsFiddle link (也许盗链 Sencha 的源代码不符合道德规范，但这永远不会获得足够的浏览量来证明这一点)。要运行测试，请单击“选择日期”按钮，然后通过拖动来旋转其中一个轮子。将出现一个消息框。将消息框与日期选择器进行比较(每个元素的顶级元素 — 正文的子元素；另一种方法是查找类为 x-floating 的元素)。

Answer 1

默认位置是静态的。在静态位置不能使用 z-index。

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