Względny element div przechodzi przez ustalony element div podczas przewijania

Question

Mam ustaloną pozycję div na górze strony. (np. Facebook) I względna pozycja div na stronie. Kiedy przewijam w dół, względny div przechodzi przez ustalony div. Chcę, żeby przeszło pod stałą div. Czy jest jakiś pomysł, aby sobie z tym poradzić?

#navcontainer 
{ 
    position:fixed; 
} 

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

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

W tym css Mam div miasta i absolutną tekst siedzi na zdjęcie, które jest we względnej div (.city)

Answer 1

Cześć Myślę, że należy to zrobić:

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

żywo demo http://jsfiddle.net/xLnKN/1/

Answer 2

myślę co szukasz jest Właściwość CSS z-index. Patrz tutaj dla dokumentacji: http://reference.sitepoint.com/css/z-index

wrzuciłem razem mały przykład pokazujący jak używać go z CSS: http://jsfiddle.net/B63Km/

Podstawową ideą jest wyższy z-index, im bliżej element jest do ciebie.

Answer 3

Użyj h igher z-index dla div nagłówka, tj., miasto i dolny dla poniższego div (tj. względnego)