Z-Index bringt Bild nicht nach vorne

  • Hallo liebes Forum,


    ich habe eine kleine Galerie erstellen wollen, bekomme die Bilder aber mit dem z-index nicht nach vorne.

    ich verwende ein Template ( https://freehtml5.co/marble-fr…r-multi-purpose-websites/ ) und versuche dort auf der Seite "portfolio" die Bilder in Vollbild darzustellen.

    Folgenden Code habe ich in meine CSS hinzugefügt:

    Code
    1. .portfolio a,.portfolio span{background-repeat:no-repeat;background-position:center;}
    2. .portfolio span{position:fixed;left:0;top:0;right:0;bottom:0;display:none;background-color:rgba(20,20,20,1);}
    3. .portfolio a:focus + span{display: block; z-index: 999999;}
    4. #pic1,#pic1 + span{background-image:url(../images/bg/lieblingsgegenstaende.jpg)}


    und in der HTML Datei:

    Im Anhang ist zu sehen wie es aussieht, das Bild wird komplett im Hintergrund aufgemacht, wenn man drauf klickt.

    ich habe etwas gegoogelt warum z-index nicht funktioniert, habe die Möglichkeiten die ich gefunden habe geprüft:

    - position NICHT static

    - display block

    - z-index auf !important stellen

    dann sollte es ja funktionieren.


    Bei dem Template ist aber noch einiges mit JavaScript geschrieben, ich hoffe hier kommt mir nichts in die Quere. Habt ihr eine Idee woran das liegen kann?

  • Meine vermutung wäre das

    Code
    1. .animate-box{
    2. position:absolute;
    3. z-index: 999999 !important;
    4. }

    Doch genauer könnte man das sagen wenn man Link zur Seite hat.

    Meistens muss man alles sehen um sehen zu können was und welche Css gerade aktive ist und so weiter ( meine erklärungen sind mist , ich weiß ).

  • ok habe sie mal schnell hochgeladen, ich habe auf die schnelle .animate-box gar nicht gefunden.

    Mache mich mal gleich auf die Suche danach.


    https://media.kosilov.de


    Also habe alle Dokumente mal durchsucht nach .animate-box leider finde ich diese Klasse nicht.

    Die wird wohl irgendwo mit dem JavaScript erzeugt.

    aber warum greift das andere !important vor meinem?

  • Hast du Code den mal getestet ?

    Kopier den mal unter der anderen Css und gebe ihn notfalls noch !important mit.

    Sag mal bescheid ob sich dann was tut ?

    So nee klasse hast du schon

    Code
    1. <div class="portfolio col-md-3 col-sm-6 col-padding text-center animate-box">
    2. <a id="pic1" href="#" tabindex="0" class="work image-popup"></a><span>&nbsp;</span>
    3. </div>

    zumindest wird die dann beim großen bild zu

    Code
    1. <div class="portfolio col-md-3 col-sm-6 col-padding text-center animate-box fadeInUp animated">
    2. <a id="pic1" href="#" tabindex="0" class="work image-popup"></a><span>&nbsp;</span>
    3. </div>


    Du kannst es auch kürzer machen doch dann kann es sein das falsche Container angesprochen werden.

    Da irgendwie meine devtools spinnen kann ich auch nicht vernünftig weiter testen . Jedesmal wenn das Bild groß ist und ich den Tools will wird das Bild wieder klein.

    Den focus kram hat den Tools mal nix ausgemacht aber jetzt geht es nicht mehr. Schrott ding.


    Habe mir nicht alles angeschaut . doch das die großen Bilder in der Box angezeigt werden kommt mir irgendwie merkwürdig vor.

    Aber kann ja auch ok sein , ich kenne es eigentlich etwas anders

  • ja der Code oben funktioniert aber nur so

    Code
    1. .portfolio.col-md-3.col-sm-6.col-padding.text-center.animate-box.fadeInUp.animated {
    2. /*position: absolute;*/
    3. z-index: 9999999 !important;
    4. }

    Jetzt kommt aber noch das Problem, dass das Bild zu groß ist also wenn ich

    Code
    1. .portfolio a:focus + span{display: block; z-index: 9999999 !important; width: 100%;}

    mache dann habe ich zwar Vollbild aber das Bild passt sich nicht an, in welcher Klasse kann ich denn das Bild steuern und nicht das Element.


    Verstehst du was ich meine?


    Habe jetzt auch mal wieder alles auf https://media.kosilov.de hochgeladen.