Div relativo está pasando sobre div fijo mientras se desplaza

Question

Tengo un div posicionado fijo en la parte superior de la página. (por ejemplo, Facebook) y una div posicionada relativa en la página. Cuando me desplazo hacia abajo, div relativo pasa por encima de div fijo. Quiero que pase bajo div fijo. ¿Hay alguna idea para manejar esto?

#navcontainer 
{ 
    position:fixed; 
} 

.city 
{ 
    position:relative; 
    float:left; 
} 

.city .text 
{ 
    position:absolute; 
    top:100px; 
    left:15px; 
} 

En este css tengo un div de la ciudad y el texto absoluta está sentado en la imagen que está en div relativa (.city)

Answer 1

Hola creo que deberías hacer esto:

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> 
​ 

Demostración en directo http://jsfiddle.net/xLnKN/1/

Answer 2

Creo que lo que busca es la Propiedad CSS z-index. Ver aquí para documentación: http://reference.sitepoint.com/css/z-index

me arrojó a un pequeño ejemplo que muestra cómo usarlo con tu CSS: http://jsfiddle.net/B63Km/

La idea básica es el más alto es el índice z, cuanto más cerca del elemento es para usted.

Answer 3

Utilice un h igher z-index para el encabezado div, es decir., city y uno inferior para el siguiente div (es decir, el relativo)