div在另一个div上方，但应在下一个div下方滚动

Question

有一个固定的位置div（即div_fixed）。另一个div就是other_content在div_fixed。该other_contentdiv有一个padding-top属性，这样当页面滚动只在other_content滚动的固定格下面。

小提琴在这里

HTML：

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS：

     div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 


    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

但是我希望非固定div停留在固定div上，并且希望非固定div消失在其上边缘下方，即非固定div的上边缘的位置将保持固定，但其内容将在页面滚动中消失就像它停留在固定div下方时的情况一样。

因此，在非固定div之前，我对html进行了一些编辑（仅2个中断）：

    <div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

CSS中的添加项是：

  .fixed_div{

    z-index:-1;
    }

    .other_content{


    width:60%;
    z-index:99099900;


    }

但是，非固定div的上边缘不会停留在我想要的位置。

如何实现呢？

编辑：

假设我为non-fixed添加了背景图片div。固定divdiv的另一张div滚动背景图像的部分是否可能 z-index高于非固定部分div？这样可以解决问题吗？

编辑2

让我们假设这fixed_div是标题，other_content是网页的内容主体。让我们添加一个div带有id 的页脚footer。中没有滚动other_content。other_content页面滚动时应滚动。

Answer 1

我认为这就是您要寻找的。您需要以一种fixed时尚的方式来定位固定的div ，但是第二个div不需要特殊的定位。只要给它一个margin-top:100px地方100px是固定的div的高度。

诀窍是使用z-index并添加position:relative;到内容div

工作演示：http : //jsfiddle.net/KyP8L/3/

.div_fixed{
    height:100px;
    width:100%;    
    position:fixed;
    top:0;
    left:0;
    background:#ff0;
    z-index:500;
}
.other_content {
    width:60%;    
    background:#0ff;
    margin-top:100px;
    z-index:600;
    position:relative;
}
?
?