Hallo :)

Ich arbeite gerade an einer Homepage, bei welcher die Navigationsleiste bis zum oberen Bildrand mitscrollt und dann fixiert bleibt. Das funktioniert auch alles wunderbar, leider überdecken teile des Content beim scrollen die fixierte Navigation und andere nicht.

Ich will natürlich, dass nichts die Navigationsleiste überdeckt. Habe versucht das Problem mit z-index zu lösen, aber leider funktioniert das rein gar nicht. Vielleicht kann mir ja jemand helfen?

Hier mein CSS Code zur Navigation:

#navigation_wrapper {  
    width:100%;  
    height:120px;  
    z-index: 999;  
    overflow: visible;  
}  
  
#navigation {  
    height: 105px;  
    width: 100%;  
    color: #ffffff;  
    background: #000000;  
}  
.navigation_container {  
    width: 100%;  
}

Und hier der CCS Code der Elemente, die überlappen:
Seltsamerweise überlappen hier nur die als class definierten elemente, nicht aber die Elternkategorie #news

#news {  
    width: 300px;  
    height: 300px;  
    background: #000000;  
}  
.news_pic {  
    background: #ff0000;  
    position: relative;  
    top: 0%;  
}  
.news_meta {  
    background: #ffffff;  
    position: relative;  
    top: 0%;  
    font-family: Fugaz One;  
    text-transform: uppercase;  
    font-size: 20px;  
    line-height: 1.2;  
    color: #000000;  
}  
.news_name {  
    position: relative;  
    top: 0%;  
    padding: 20px;  
    font-family: Fugaz One;  
    font-size: 30px;  
    line-height: 1.2;  
    text-transform: uppercase;  
    color: #b2201c;  
}

Es würde mich wirklich wahnsinnig freuen, wenn jemand eine Antwort auf mein Problem hat.