CODEWITHSUNDEEP
jqueryhtmlcss
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

div above another div, but should scroll beneath the later one

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.

The fiddle is 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;

}

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.

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>

The addition in css is:

  .fixed_div{
    
    z-index:-1;
    }
    
    .other_content{
    
    
    width:60%;
    z-index:99099900;

    
    }

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

How to achieve that ?

EDIT :

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

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.

Upvotes: 0

Views: 17042

Answers (2)

DBPaul
DBPaul

Reputation: 580

One option would be to wrap the content div in another container with a fixed position.

For example:

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; }

Demo: http://jsfiddle.net/xmKMs/

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

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.

The trick is to use z-index and to add position:relative; to the content div

Working Demo: 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;
}
​
​

Upvotes: 6

Related Questions