Есть ли способ увидеть контекст стекирования в IE/Firefox/Chrome/etc.?

Я пытаюсь отследить проблему z-index. Я смотрю на страницу в IE9 DOM Inspector, и я просто не могу понять.

У меня есть один элемент с z-индексом 10000, а другой с z-индексом 7000, и тем не менее z-индекс 10000 рисует ниже индекса z 7000. Ясно, что где-то в иерархии что-то устанавливает контекст стекирования, но я просматривал вверх и вниз по иерархии, и я не смог его найти.

Ничто иное, как эти два элемента, насколько я вижу, имеет набор z-индексов. И ничего, как значение непрозрачности. и я вижу это в FF5 и IE9, так что это не старая ошибка контекста стека IE < 7.

У любого из браузеров есть инструмент, который скажет мне, какой элемент устанавливает контекст стекирования?

Спасибо.

Ответы

Ответ 1

Если вы используете Chrome https://github.com/gwwar/z-context, это простое расширение, чтобы увидеть:

  • Если текущий элемент создает контекст стекирования и почему
  • Каков его родительский контекст стекирования
  • Значение z-index

и важно, например aprohl5: свойство z-index может влиять на порядок стека, только если позиция явно установлена ​​на фиксированную, абсолютную или относительную.

Это хороший способ упорядочить заказ с помощью Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/

Ответ 2

в новых версиях firefox у вас 3D-вид, нажав Ctrl + Shift + I, затем щелкнув значок 3D или 3D-окна, чтобы получить доступ к