Chrome以不同的方式处理z索引、位置固定的元素.原因是什么

Question

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

我创造了这把小提琴：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"
    });
});
});

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

有人能解释一下是什么能打破这把小提琴吗？我所说的"中断"是指让绿色元素在灰色条的前面滚动，而不是在后面滚动

谢谢你的任何尝试和破译我疯狂的想法。

Answer 1

大家好。我最终弄清楚了我的问题是什么，并解决了它，但我忘记了这个悬而未决的问题，认为有人可能会发现这个问题，并有和我一样的问题。

因此，答案与所谓的"堆叠顺序"one_answers"堆叠上下文"有关。

本文：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/解释得很好。

总结（并破解）这篇文章：z索引不仅仅是根据页面上的任何随机元素（z索引）编号对其进行分层。它将对某些组中的元素进行分层，并且这些组将堆叠在一起，而不管它们的z索引如何。特别是具有位置的元素：不同于静态，以及不透明度低于1的元素。

我希望这能帮助那些和我一样困惑的人！