在这种情况下，为什么我需要z-index？

Question

我想让div（具有固定位置）隐藏在指定区域之外。这完全符合我的要求：

<div id="div1" style="position:relative; overflow:hidden;">
     <div id="div2" style="position:relative; z-index:10;">
          <div id="div3" style="position:fixed"> </div>
     </div>
</div>

Here is an example.（仅适用于Firefox）

但我不明白为什么#div2需要z-index属性？

另外，iirc，我的例子曾经在Chrome上工作过，但现在还没有。为什么呢？

Answer 1

我假设div2的z-index比div3大，这将导致DIV3的部分不重叠或通过div2 / div1显示

Answer 2

http://jsfiddle.net/wS5Rx/4/

固定元素完全不受溢出的影响，因此您需要做的是添加一些JS以使其在滚动到达后消失

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
        $('#div3').css({
            'display': 'none'
        });
    }else{
        $('#div3').css({
            'display': 'block'
        });        
    }

});