css - 为什么在这种情况下我需要 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>

这是一个例子。（仅限火狐）

但我不明白为什么#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'
        });        
    }

});