A relative div goes through a fixed div when scrolling

Question

I have a fixed positioned div at the top of the page. (e.g. Facebook) and the relative positioned div on the page. When I scroll down, the relative div goes through the fixed div. I want it to go under a 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 the absolute text sits on the image that is in the relative div (.city)

Answer 1

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/

Answer 2

I think you are looking for the z-index CSS property. See documentation here: http://reference.sitepoint.com/css/z-index

I put 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.

Answer 3

Use a higher z-index for the div header, i.e. city and lower for the lower div (i.e. relative)