Photoswipe blendet die Navigation nicht aus obwohl z-index vieeel höher ist

    Hallo,


    ich habe mich gerade in diesem Forum angemeldet, ich habe ein Problem und finde einfach keine Lösung. Ich bin Fotografin und lerne gerade html und css... von Java habe ich keine Ahnung.

    Meine Webseite, die auch online ist, habe ich selber geschrieben aber ich komme an einem Punkt einfach nicht weiter.


    Es gibt 2 Navigationen. Die eine ist oben fest - fixed. Mit Z-index 91. Die zweite sitzt unter der bildschirmfüllenden Diashow und scrollt nach oben, bleibt unter der ersten Navigation hängen. Ihr Z-index ist 100. Der restliche Inhalt der Seite fließt dann unter beiden Navigationen durch. Das funktioniert auch richtig so.


    Ich habe aber auf der Seite eine Bildergalerie. Wenn ich ein Bild vergrößere, dann wird nur die 2. Navigation verdeckt (mit z-index 100) und die obere mit z-index 91 bleibt (was für mich schon einmal gar nicht logisch ist)

    Das Problem dabei ist, daß die Steuerungsfunktionen der photoswipe genau dort liegen und somit verdeckt sind ;(. Ich habe sie auch schon ein Stück nach unten gesetzt, aber es sieht einfach doof aus. :( da das Bild dann nicht mittig ist. Wenn ich auf den Vollbild modus gehe, dann funktioniert alles, die Navigation ist verschwunden - alles okay, aber dahin komme ich ja ohne die Steuerung erst gar nicht. Der z-Index der Photoswipe liegt bei 1500 - also wesentlich höher...


    Eine Lösung, die ich aber nicht verstehe und deshalb hoffe ich auf eure Hilfe. Wenn ich den z-index der obersten Navigation (die eben nicht verschwindet) auf 90 setze, dann funktioniert alles perfekt mit der Photoswipe. Die Leiste verschwindet, alles wird perfekt angezeigt. ABER =O dann scrollt mein Inhalt auf der Seite über diese Navigation und somit ist sie nicht mehr zu sehen. Das sieht nicht nur doof aus, ich brauche diese Leiste wirklich standhaft da oben. Der Z-index von MAIN - allem, was scrollt, liegt bei 90. Wenn der gleich ist, geht es. Aber ich will diese Navigation immer sichtbar haben!


    Hat jemand eine Lösung, was ich da machen könnte?

    eine Beispielseite auf meiner Webseite mit dieser Bildergalerie

    Vielen, vielen Dank schonmal.

    lg Hanna

    Versuche doch bitte mal, ob sich dein Problem verbessert, wenn du in der navi.css / Zeile 11 und Zeile 12 durch folgenden CSS Code ersetzen

    Des weiteren hast du in der '@media screen and (min-width: 768px)' nochmal eine Formatierung für '.nav' drin... die solltest du ersatzlos löschen!

    Und dann ist da noch das/ die vielen Formate für 'nav > .wrapper-rand'... du brauchst nur eines:

    CSS
    .nav > .wrapper-rand {
  margin-top: 0px !important;
}

    Und wenn du dazu noch die Formatierungen für 'nav > .wrapper-rand' in den diversen @media Queries löscht, dann kannst du das '!important' in obigen Code sogar weglassen!

    Bitte einfach mal testen.. schauen, ob es irgendwelche unerwünschten Nebenwirkungen gibt und wenn es nicht klappt, dann kannst du die Änderungen ja wieder rückgängig machen und den alten Zustand wiederherstellen.


    PS: Das Format 'sticky' funktioniert nur in HTML5 fähigen Browsern! Die ganze IE Familie kann das nicht.

    Das kann dann zu etwas seltsamen Erscheinungen beim betrachten der Seite zB im IE11 (und älter) führen, denn 'fixed' versteht der und das 'sticky'-Element wandert beim scrollen darüber weg ins Nirwana!

    Vielen Dank, nur leider funktioniert das auch nicht, es ändert gar nichts, aber macht auch nichts kaputt. Wozu ich das top hatte, weiß ich auch nicht mehr...


    Das mit den ganzen Wrapper Rändern habe ich nur gemacht, weil sonst dahinter irgendetwas heraus schaut und mein Rand nicht richtig freigestellt ist. Das ist eh ne Bastelübung, die noch nicht abgeschlossen ist. Ja, das sind zu viele queries, aber es war erstmal die einfachste Lösung dafür denn ich weiß nicht wie ich ihn sonst wegbekommen soll...;) (siehe Bild 1)


    Das mit dem IE ist echt doof, aber ich habs so hinbekommen, daß er wenigstens die Navileiste anzeigt (auch wenn sie dann abwandert) und nicht komplett verschwinden läßt (das war am Anfang nämlich so... aber ist mir erstmal egal und ich hoffe, den nutzen die Leute nicht so viel ;)


    Vielleicht gibts ja doch noch eine Lösung für meine Galerie? Es kann doch nicht sein, daß man über -fixed- nicht drüber kommt? Im Vollbildmodus funktioniert es auch, da ist dann die Navigationsleist echt verschwunden...:/

    Ich habe eine Weile gerätselt, aber ich denke, ich habe jetzt den Grund gefunden, warum der z-index von dem Photoswipe nicht wirkt: Der Photoswipe-Container ist ein Kindelement vom main und ein Kindelement kann keinen anderen z-index haben als das Eltern-Element, siehe hier:

    https://stackoverflow.com/ques…igher-z-index-than-parent

    Der z-index von main ist 90 und muss auch kleiner sein als der der Nav, damit diese immer sichtbar ist, wenn das Photoswipe aus ist.

    Versuche, den Container des Photoswipe außerhalb von main zu legen, so dass er ein direktes Kindelement von body ist.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden