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的页脚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/

div高于另一个div，但应该在后一个div下滚动

2 个答案: