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

Question

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

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

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

Есть ли в каком-либо из браузеров инструмент, который сообщит мне, какой элемент устанавливает контекст стека?

Спасибо.

Answer 1

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

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

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

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

Answer 2

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

Answer 3

Чтобы z-index работал, вы должны явно установить положение на фиксированное, абсолютное или относительное.

Вот отличное объяснение: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/