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
    .portfolio a,.portfolio span{background-repeat:no-repeat;background-position:center;}
    .portfolio span{position:fixed;left:0;top:0;right:0;bottom:0;display:none;background-color:rgba(20,20,20,1);}
    .portfolio a:focus + span{display: block; z-index: 999999;}
          
    #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

    CSS
    .animate-box{
    position:absolute;
    z-index: 999999 !important;
    }

    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?

  • Kannst du mir mal sagen ob dir der Code weiter hilft ?

    Code
    .portfolio.col-md-3.col-sm-6.col-padding.text-center.animate-box.fadeInUp.animated {
        position: absolute;
        z-index: 9999;
    }

    Bei mir geht es aber auf den Handy nicht mehr. Ich glaube das irgendwie mein Browser spinnt oder so

  • 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
    <div class="portfolio col-md-3 col-sm-6 col-padding text-center animate-box">
            <a id="pic1" href="#" tabindex="0" class="work image-popup"></a><span>&nbsp;</span>
    </div>

    zumindest wird die dann beim großen bild zu

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

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

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

    CSS
    .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.

Jetzt mitmachen!

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