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

Question

有一个固定位置的div（即div_fixed）。另一个div 即other_content 在div_fixed 下方。 other_content div 具有 padding-top 属性，因此当页面滚动时，只有 other_content 会滚动到固定 div 下方。

小提琴是here

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的上边缘没有停留在我想要的位置。

如何实现？

编辑：

假设我为不固定的div 添加了背景图像。是否有可能固定的div 的背景图像的一部分，另一个div 将在其上滚动的z-index 比非固定的div 高？问题会这样解决吗？

EDIT2

假设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;
}
​
​

Answer 2

一种选择是将内容 div 包装在另一个具有固定位置的容器中。

例如：

HTML：

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

CSS：

.fixed_container {
    position: fixed;
    overflow: auto;
    top:30px;
    width: 100%;
    height: 5000px;
    z-index:10; }

.other_content { position: absolute; }

演示：http://jsfiddle.net/xmKMs/