Absolut positionierte div mit einem höheren z-index wird angezeigt, unter anderen divs

Habe ich einen HTML-code mit einem Fehler an einem gewissen Punkt, dass ich nicht erkennen kann. Hier ist mein JSFiddle.

Insbesondere, wenn ich auf "Zeige mehr", eine absolut positionierte div mit dem höchsten z-index angezeigt werden soll, oben auf alles. Jedoch, wie Sie sehen können die erste absolute positionierten div-gezeigt wird unter andere Inhalte.
Wie in den Antworten zu ähnlichen Fragen, habe ich bereits eine z-index Wert und die position Typ (absolute oder relative) für jeden Behälter der div.

Irgendeine Idee, um dieses problem zu lösen?

  • einmal entfernen Sie alle z-index und überprüfen. Ich hoffe, Sie bekommen Ihre Lösung
  • Naja, wenn ich den z-index-Wert (z.B. 1000) nur in dem div mit der Klasse detail-modal-Fenster funktioniert alles einwandfrei. Das problem ist, dass seine container gesetzt werden sollten, mit einem z-index-Wert (z.B. 10), aber der browser scheint zu ignorieren, dass 10 < 1000!
  • Danke, ich löste nach Ihren Vorschlägen und mit Hilfe der z-index:auto
InformationsquelleAutor JeanValjean | 2012-09-29
  1. 1

    Dank Ghost Antwort Kommentar, habe ich das problem gelöst.

    In anderen Antworten habe ich gelesen, dass man sollte ein zunehmenden z-index - Wert sowie eine position:relative alle Container, ein div, dass man zeigen würde, Sie auf schweben. Vielleicht ist es nicht immer wahr.
    Hier ist was ich getan habe:

    1. Ich alle entfernt die z-index-Werte und unnötige Positionierung (ich nehme an, letzteres ist nicht sinnvoll).
    2. Ich z-index:auto an den container, der div, dass ich würde zeigen Sie auf schweben.

    Nun funktioniert der code einwandfrei: dies ist die aktualisierte JSFiddle.

    InformationsquelleAutor JeanValjean
  2. 0

    versuchen, diese css -

     .offer-info-shops span
position:absolute;
z-index:1000;

    JSFIDDLE

    • Sorry, aber Es funktioniert nicht! Hast du es ausprobiert? Können Sie bitte zeigen Sie mir eine funktionierende JSFiddle?
    • Es funktioniert nicht. Haben Sie gesehen, dass die zweite "Zeige mehr" oben dargestellt ist? Highlight dieses problem, Holen Sie sich einen Blick auf die gleiche JSFiddle mit einem weißen hintergrund für das absolut positionierte div
    InformationsquelleAutor Man Programmer
  3. 0

    Interessantes problem.

    Ändern Sie die folgenden z-index: 

    .Angebot-Inhalt .Angebot-Inhalt-info-Geschäfte{z-index:auto}

    .detail-modal-Fenster{z-index:1}

    http://jsfiddle.net/gteEg/12/

    Dadurch werden alle Elemente werden in Ihrer z-Indizes miteinander verglichen.

    Das Problem, das Sie hatten, war, weil seit dem Sie zugewiesen wird, einen z-index zu bieten-Inhalte, und .Angebot-Inhalt-info-shops, die Sie geschaffen hatte, ein stack-Kontext, was bedeutet, dass untergeordnete Elemente .Angebot-Inhalt-info wie .detail-modal-Fenster hatte, deren z-index im Vergleich zu seinen Geschwistern .Angebot-Inhalt-info-Geschäfte.

    https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

    • Hast du gelesen, meine Antwort zuerst?
    • Nachdem ich meine Lösung gepostet, die Seite aktualisiert und dann sah ich Ihre Lösung. Guten job, es herauszufinden.
    InformationsquelleAutor davidtingsu
Schreibe einen Kommentar