проблемы с z-index и несколькими важными правилами

Question

Кто-нибудь когда-нибудь сталкивался со случаем, когда более конкретное объявление !important не перезаписывает другое объявление !important?Вот базовая css:

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

А вот что я хочу использовать для переопределения z-индекса:

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

Когда я проверяю через отладчик Chrome (или Safari)в Windows я вижу, что объявление .x-msgbox.x-floating перезаписано (вычеркнуто), а объявление x-floating активно.Это идет вразрез с тем, что я знаю о специфичности CSS, и что я ожидаю от упрощенных тестов .

Пример кода:

Поскольку я используюСенча, это будет работать только в Chrome или Safari, но вот ссылка jsFiddle (возможно, не кошерная, чтобы ссылаться на источник Сенчи, но он никогда не получит достаточно просмотров, чтобы это вообще имело значение).Чтобы запустить тест, нажмите кнопку «Выбрать дату», затем перетащите одно из колес, перетаскивая их.Появится окно сообщения.Сравните окно сообщения со средством выбора даты (каждый элемент верхнего уровня - дочерние элементы тела; другой способ сделать это - поиск элементов с классом x-floating).

Answer 1

Положение по умолчанию является статическим. В статическом положении нельзя использовать z-index.

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

Answer 2

!important устанавливает самый высокий приоритет для этой CSS

почему .x-msgbox.x-floating? и не только .x-msgbox.

в первый раз, когда вы даете .x-floating наивысший приоритет, поэтому в следующий раз, когда важен (z-inbdex.10001), он игнорируется.

первый !important может быть удален

почему бы не создать новый класс и снова не перезаписать его новым значением?

и x_msgbox может быть, также лучше