有没有办法在 IE/Firefox/Chrome/等中查看堆栈上下文? [英] Is there a way to see the stacking context, in IE/Firefox/Chrome/etc.?
问题描述
我正在尝试查找 z-index 问题.我在 IE9 的 DOM Inspector 中查看页面,我就是想不通.
I'm trying to track down a z-index problem. I'm looking at the page in IE9's DOM Inspector, and I just can't figure it out.
我有一个元素的 z-index 为 10000,另一个元素的 z-index 为 7000,但 z-index 10000 绘制在 z-index 7000 下方.显然在层次结构中的某处,某些东西正在设置一个堆叠的上下文,但我一直在上下浏览层次结构,我一直没能找到它.
I have one element with a z-index of 10000, and another with a z-index of 7000, and yet the z-index 10000 is drawing below the z-index 7000. Clearly somewhere in the hierarchy, something is setting a stacking context, but I've been browsing up and down the hierarchy and I haven't been able to find it.
就我所见,除了这两个元素之外,没有其他元素具有 z-index 集.没有设置不透明度值.我在 FF5 和 IE9 中看到了这一点,所以这不是旧的 IE<7 堆栈上下文错误.
Nothing other than these two elements, so far as I can see, has a z-index set. And nothing as a opacity value set. and I'm seeing this in FF5 and IE9, so it's not the old IE<7 stacking context bug.
是否有任何浏览器有工具可以告诉我哪个元素正在设置堆叠上下文?
Do any of the browsers have a tool that will tell me which element is setting a stacking context?
谢谢.
推荐答案
如果你使用 Chrome https://github.com/gwwar/z-context 是一个可以查看的简单扩展:
If you use Chrome https://github.com/gwwar/z-context is a simple extension to see:
- 如果当前元素创建了一个堆叠上下文,以及为什么
- 它的父堆叠上下文是什么
- z-index 值
而且很重要,就像 aprohl5 所说:只有当位置显式设置为固定、绝对或相对时,z-index 属性才能影响堆栈顺序.
and important, like aprohl5 said: The z-index property can affect the stack order only if the position is explicitly set to fixed, absolute, or relative.
这是使用 Sass 维持秩序的好方法 https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
This is a nice way to mantain order with Sass https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
这篇关于有没有办法在 IE/Firefox/Chrome/等中查看堆栈上下文?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!