Relative div is passing over fixed div while scrolling
I think what you are looking for is the CSS property z-index
. See here for documentation: http://reference.sitepoint.com/css/z-index
I threw together a small example showing how to use it with your CSS: http://jsfiddle.net/B63Km/
The basic idea is the higher the z-index, the closer the element is to you.
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/
How can you avoid using a z-index for this? Z-index is typically considered an anti-pattern and can easily snowball into requiring other elements to also require z-index.
Use a higher z-index for the header div, ie., city and a lower one for the below div (ie., the relative one)