z-index和多个重要规则的问题

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-floating声明处于活动状态。这违背了我所知的css特异性，以及我对simplified tests的期望。

示例代码：

由于我使用的是Sencha，这只能在Chrome或Safari中使用，但这里只有jsFiddle link（也许不是热线链接Sencha的来源，但是这根本不会得到足够的意见）。要运行测试，请单击“选择日期”按钮，然后通过拖动旋转其中一个轮子。将出现一个消息框。将消息框与日期选择器进行比较（每个人的顶级元素 - 正文的子级;另一种方法是查找具有类x-floating的元素）。

Answer 1

!important设置该css的最高优先级

为什么.x-msgbox.x-floating？而不仅仅是.x-msgbox。

您第一次给.x-floating最高优先级，所以下次有重要（z-inbdex.10001）时，它会被忽略。

可以删除第一个!important

为什么不创建一个新类并直接用新值重写它？

和x_msgbox可能也会更好

Answer 2

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

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