Nici: Gescrollter Content überdeckt fixierten Bereich

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.

  1. Hallo!

    Habe versucht das Problem mit z-index zu lösen, aber leider funktioniert das rein gar nicht.

    Es ist sehr wahrscheinlich, dass dein Problem mit z-index zu tun hat, bzw. zu lösen ist.

    CSS Code ohne das zugehörige HTML Markup ist "sinnfrei".
    Bitte sei so nett, und stelle ein (reduziertes) Beispiel online, z.B. bei JSFiddle o.ä. - danke!

    Gruß Gunther

    1. Es ist sehr wahrscheinlich, dass dein Problem mit z-index zu tun hat, bzw. zu lösen ist.

      Das wäre natürlich am einfachsten/elegantesten.

      CSS Code ohne das zugehörige HTML Markup ist "sinnfrei".
      Bitte sei so nett, und stelle ein (reduziertes) Beispiel online, z.B. bei JSFiddle o.ä. - danke!

      Gruß Gunther

      Oh, ich wusste nicht, dass es sowas wie JSFiddle gibt.
      Hier die bisherige Seite (ohne Bilder) dargestellt.

      http://jsfiddle.net/PfpP8/

      Der Neuigkeiten Bereich wird durch Wordpress eingepflegt. Hier entsteht das selbe "Scrollover" Problem wie bei "Kommende Shows", welches im Beispiel ja gut ersichtlich ist.

      1. Hallo,

        Es ist sehr wahrscheinlich, dass dein Problem mit z-index zu tun hat, bzw. zu lösen ist.

        Das wäre natürlich am einfachsten/elegantesten.

        z-index ist dein Freund (für #navigation).

        vg ichbinich

        --
        Kleiner Tipp:
        Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...
        1. z-index ist dein Freund (für #navigation).

          vg ichbinich

          Aber selbst wenn ich #navigation einen z-index von 9999 zuweise, überdecken manche Elemente die Navigation immer noch.

          1. Mahlzeit,

            Aber selbst wenn ich #navigation einen z-index von 9999 zuweise, überdecken manche Elemente die

            Navigation immer noch.

            Und welchen z-index haben diese Elemente?

            --
            42
            1. Mahlzeit,

              Aber selbst wenn ich #navigation einen z-index von 9999 zuweise, überdecken manche Elemente die
              Navigation immer noch.

              Und welchen z-index haben diese Elemente?

              #show sowie #news habe ich einen z-index von 1 zugewiesen

          2. @@Nici:

            nuqneH

            Aber selbst wenn ich #navigation einen z-index von 9999 zuweise, überdecken manche Elemente die Navigation immer noch.

            Stapelkontext? [CSS2 §9.9]

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hi!

        Oh, ich wusste nicht, dass es sowas wie JSFiddle gibt.
        Hier die bisherige Seite (ohne Bilder) dargestellt.

        http://jsfiddle.net/PfpP8/

        Im Prinzip reicht schon die Änderung

        #navigation_wrapper {  
            width:100%;  
            height:120px;  
            z-index: 999;  
            position: relative;  
        }
        

        Siehe: http://wiki.selfhtml.org/wiki/Z-index

        Updated JSFiddle: http://jsfiddle.net/PfpP8/2/

        Dein Quelltext bietet allerdings auch noch reichlich Spielraum für Verbesserungen, Berichtigungen und Optimierungen (dazu mögen sich bitte andere Teilnehmer äußern, da mir aktuell die Zeit dafür fehlt - danke!).

        Gruß Gunther

        1. Hallo,

          Im Prinzip reicht schon die Änderung
              z-index: 999;

          Astronomisch hohe z-indizes sind nicht nötig. z-index: 1 oder 2 reicht fürs Erste aus.

          Erst wenn man im Inhalt einen höheren z-index verwendet (und dieser im gleichen Stacking-Kontext mit dem fixiertem Menü konkurriert), muss der des Menüs erhöht werden.

          Am besten stellt man sich für ein Projekt eine definitive Liste mit den verwendeten Z-Indizes zusammen, sonst herrscht Wildwuchs und man muss sich ständig mit höheren Z-Indizes übertreffen. Beispiele aus zwei Projekten, an denen ich gearbeitet habe:

          https://github.com/bertelsmannstift/GED-VIZ/blob/master/doc/css-z-indices.txt für http://viz.ged-project.de
          http://pastebin.com/Lq0QRS5x für http://data.oecd.org

          Mathias

          1. Hallo Mathias!

            Im Prinzip reicht schon die Änderung
                z-index: 999;

            Astronomisch hohe z-indizes sind nicht nötig.

            Da hast du prinzipiell recht ...

            z-index: 1 oder 2 reicht fürs Erste aus.

            Um die dann jedes Mal alle zu ändern, wenn doch noch ein neues Element dazukommt!

            Erst wenn man im Inhalt einen höheren z-index verwendet (und dieser im gleichen Stacking-Kontext mit dem fixiertem Menü konkurriert), muss der des Menüs erhöht werden.

            Wenn man ein Element hat, das definitiv stets vor/ über allen anderen angezeigt werden soll, spricht imho nichts dagegen, diesem einen entsprechend hohen Z-Index zu verpassen.
            So wird auch deutlich, dass dieses Element immer zu oberst angezeigt werden soll, und entsprechende Änderungen werden somit auch vermieden.

            Am besten stellt man sich für ein Projekt eine definitive Liste mit den verwendeten Z-Indizes zusammen, sonst herrscht Wildwuchs und man muss sich ständig mit höheren Z-Indizes übertreffen.

            Da stimme ich dir voll und ganz zu.

            Gruß Gunther

            1. z-index: 1 oder 2 reicht fürs Erste aus.

              Um die dann jedes Mal alle zu ändern, wenn doch noch ein neues Element dazukommt!

              Das ist durchaus sinnvoll, weil man sonst schnell bei z-index: Phantastillionen angekommen ist. Das ist problematisch, weil man später nicht mehr weiß, ob wirklich z-index: 1000 nötig.

              Die verlinkten Beispiele definieren nicht einzelne z-indizes, sondern UI-Typen und Hunderter-Bereiche, aus denen z-indizes verwendet werden können. Wenn neue hinzukommen, muss das System also nicht geändert werden, es sei denn, es kommen UI-Typen mittendrin hinzu. Die Hunderter habe ich noch nie voll bekommen.

              Wenn man ein Element hat, das definitiv stets vor/ über allen anderen angezeigt werden soll, spricht imho nichts dagegen, diesem einen entsprechend hohen Z-Index zu verpassen.

              Fragt sich nur, welches Element ist das? Man weiß es meiner Erfahrung nach nicht sicher am Anfang.

              Die verlinkten Listen sind organisch gewachsen. »Sticky Header«, also das, was hier gewünscht war, taucht eben nicht ganz oben auf, sondern z.B. modale Dialoge und der (emulierte) Fullscreen-Modus.

              Ich habe nichts dagegen, eine Zahl als »das allerhöchste« zu definieren (z.B. 999), nur schützt das einen nicht davor, irgendwann entweder höher gehen zu müssen (z.B. 1000) oder alle z-indizes abzusenken, wenn eine Ebene dazukommt.

              Mathias

      3. @@Nici:

        nuqneH

        Oh, ich wusste nicht, dass es sowas wie JSFiddle gibt.

        Es gibt sogar besseres.

        Wenn JSFiddle für CSS gut wäre, hieße es ja CSSFiddle.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Mahlzeit,

          Es gibt sogar besseres.

          Da fehlt ganz eindeutig ein "Run"-Button. Wenn ich eine Animation neu starten will, muss ich irgendwas am Content ändern, was nicht wirklich sinnvoll ist.

          --
          42
  2. leider überdecken teile des Content beim scrollen die fixierte Navigation und andere nicht.

    Definiere "teile".

    Ich frage meinen Kaffeesatz: Der Flash Player ist immer oben.

    Linuchs