Chrome 处理 z-index，以不同方式定位固定元素。是什么原因？答案

【问题标题】：Chrome treating z-indexed, position fixed elements differently. What is the reason?Chrome 处理 z-index，以不同方式定位固定元素。是什么原因？
【发布时间】：2013-02-22 17:56:14
【问题描述】：

好的，我正在编写一些代码，其中 chrome 忽略了两个固定元素的 z-index，而我希望落后于另一个的元素不起作用。

我创建了这个小提琴：http://jsfiddle.net/stev0205/4nbL9/ 以独立于我的其他项目进行测试，找出问题所在，但这（使用完全相同的 js、css 和 html）并没有复制我的问题，它的行为只是我想要它怎么做。

这是 js：

$(window).scroll(function() {

$("#topFixed").css({
    top: "0px",
    left: "0px",
    width: "100%",
    position: "fixed",
    marginTop: "0px"
});

$(".fixedCol").each(function() {
    var topLoc = $(this).parent().offset().top -             $(window).scrollTop();
    var leftLoc = $(this).parent().offset().left;
    $(this).css({
        top: topLoc,
        left: leftLoc,
        position: "fixed"
    });
});
});

问题是当我在我的项目中实现它时，问题仍然存在。

谁能阐明什么可以破坏这个小提琴？ “中断”是指让绿色元素在灰色条的前面滚动，而不是在它后面。

感谢您的任何尝试以及破译我疯狂的想法。

【问题讨论】：

你为什么要发布一个有效的 jsFiddle 并且不会复制你的问题？
我无法通过 jsfiddle 复制问题，而且我的系统有一些我不想破坏的身份验证，因此我可以发布链接。我希望任何了解 webkit/chrome 的人都可以对我有所了解。我知道这是一个很长的尝试，但我花了几天时间研究 webkit 错误提交等，但找不到任何东西。

标签： jquery google-chrome webkit z-index fixed

【解决方案1】：

大家好。我最终弄清楚了我的问题并解决了它，但我忘记了这个悬而未决的问题，并认为有人可能会发现这个问题并遇到与我相同的问题。

所以答案与所谓的“堆叠顺序”和“堆叠上下文”有关。

这篇文章：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 很好地解释了它。

总结（并破解）这篇文章：z-indexing 不只是通过它的（z-index）编号对页面上的任何随机元素进行分层。它将某些组中的元素分层，并且这些组将彼此堆叠，而不管它们的 z-index。特别是位置元素：不同于静态元素，以及不透明度低于 1 的元素。

希望对和我一样困惑的人有所帮助！

【讨论】：