0

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

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

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

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

4

1 回答 1

2

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

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

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

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

我希望这可以帮助任何像我一样困惑的人！

于 2013-07-24T03:43:49.667 回答