Question

好吧我正在研究一些代码，其中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"
    });
});
});

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

任何人都可以解释什么可以打破这个小提琴吗？通过“休息”，我的意思是让绿色元素在灰色条前面滚动，而不是在它后面。

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

Answer 1

大家好。我最终弄明白我的问题是什么并修好了，但我忘记了这个开放的问题，并且认为有人可能会发现这个并且我遇到了同样的问题。

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

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

总结（并抄袭）文章：z-indexing不只是通过它的（z-index）数字对页面上的任何随机元素进行分层。它将对某些组中的元素进行分层，并且无论它们的z-index如何，这些组都将堆叠在一起。特别是具有位置的元素：与静态不同，以及不透明度小于1的元素。

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

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

1 个答案: