div在另一个div上面，但应滚动在后面的一个 [英] div above another div, but should scroll beneath the later one

问题描述

有一个固定在位置的 div （即 div_fixed ）。另一个 div 即 other_content 在 div_fixed 下。 other_content div有一个 padding-top 属性，所以当页面滚动时，只有

there is a div (namely div_fixed) which is fixed in position. Another div namely other_content is beneath the div_fixed. The other_content div has a padding-top property so that when the page is scrolled only the other_content is scrolled beneath the fixed div.

=nofollow>此处

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。

But I want the non-fixed div to stay upon the fixed div and want the non-fixed div to disappear just beneath its upper edge i.e. position of the non-fixed div's upper edge will remain fixed but it's content will start disappearing on page scroll just the way it happened when it was staying beneath the fixed div.

所以我在html中有一个小的编辑（只有2个小节），在非固定div之前：

So i had a little edit in the html ( just 2 breaks) before the non-fixed div :

    <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不会停留在我想要的位置。

But the upper edge of the non-fixed div does not stay at the position I want.

如何实现？

EDIT ：

假设我为非固定的 div 添加了一个背景图片。其他div将滚动的固定 div 的背景图像的一部分将有一个 z-index 高于非固定 div 的值？

suppose I add a background image for the non-fixed div. Is it possible that part of background image of the fixed div over which the other div will scroll will have a z-index higher than that of the non-fixed div ? Will the problem be solved in that way ?

让我们假设这个问题可以通过这种方式解决？

EDIT2

fixed_div 是标题， other_content 是网页的内容正文。让我们添加一个页脚 div 和id footer 。在 other_content 中不应出现滚动。 other_content 应在滚动页面时滚动。

Let use suppose that fixed_div is the header, other_content is the content body of a webpage. Let us add a footer div with id footer. No scroll should be present in other_content. other_content should scroll when the page is scrolled.

推荐答案

我认为这是你要找的。您需要将固定div定位在固定方式，但第二个div不需要特殊定位。只需给它一个 margin-top：100px 其中 100px 是固定div的高度。

I think this is what you're looking for. You'll want to position the fixed div in a fixed fashion, but the second div doesn't need special positioning. Just give it a margin-top:100px where 100px is the height of the fixed div.

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

The trick is to use z-index and to add position:relative; to the content 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;
}
​
​

这篇关于div在另一个div上面，但应滚动在后面的一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！