Relative div is passing over fixed div while scrolling

css

Solution

Hi I think you should do this:

css

#navcontainer
{
    position:fixed;
    background:red;
    left:0;
    right:0;
    top:0;
    height:100px;
    z-index:3;
}

.city
{
    position:relative; 
    background:green;
    left:0;
    right:0;
    padding:10px;
    top:100px;
    z-index:2;
}

.city .text 
{
    padding:10px;
    background:yellow;
}​

HTML

<div id="navcontainer">This is navigation</div>

<div class="city">
    <div class="text">here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br /></div>
</div>
​

Live demo http://jsfiddle.net/xLnKN/1/

Problem

I have a fixed positioned div on the top of the page. (e.g. Facebook) And an relative positioned div in the page. When I scroll down, relative div is passing over fixed div. I want it to pass under fixed div. Is there any idea to handle this ? ``` #navcontainer { position:fixed; } .city { position:relative; float:left; } .city .text { position:absolute; top:100px; left:15px; } ``` In this css I have a city div and absolute text is sitting on the image which is in relative div (.city)

Original source