Chrome treating z-indexed, position fixed elements differently. What is the reason?

Question

Alright I'm working on some code, where chrome is ignoring the z-index of two fixed elements, and the elements I wish to fall behind the other, is not working.

I created this fiddle: http://jsfiddle.net/stev0205/4nbL9/ to test independent of my other project, to find out where the problem lie, but this (using the exact same js, css, and html) does not replicate my problem, it behaves just how I want it to.

Here's the 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"
    });
});
});

The problem is when I implement it in my project, the problem remains.

Can anyone shed any light on what can break this fiddle? By "break" i mean make the green elements scroll in front of the grey bar, not behind it.

Thanks for any attempts and for deciphering my mad thoughts.

Answer 1

Alright everyone. I eventually figured out what my problem was and fixed it, but I forgot about this open question and thought somebody might find this and have the same problem I did.

So the answer has to do with something called "Stacking Order" and "Stacking Contexts".

This article: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ does a great job of explaining it.

To summarize (and hack away at) the article: z-indexing doesn't just layer any random element on the page by it's (z-index) number. It will layer elements in certain groups and those groups will be stacked on top of one another regardless of their z-index. Specifically elements with position: different than static, and elements with opacity lower than 1.

I hope this helps anyone who was as confused as I was!