Internet Explorer Z-Index Fehler?

Question

Wie überlappen Sie ein Element über ein anderes Element, das relativ in Internet Explorer positioniert ist? Der Z-Index funktioniert nicht, er erscheint immer hinter dem relativ positionierten Element.

Answer 1

Sie sind nicht zufällig versuchen, etwas über eine Combobox (wählen Sie Tag), iframe oder Flash-Film richtig?

In diesen Fällen ist Z-Index eine verlorene Ursache.

Sonst welche Browserversion benutzen Sie und verwenden Sie absolute Positionierung?

Answer 2

Ich hatte wirklich Probleme mit diesem Problem, für das diese spezielle Problemumgehung nicht relevant war. Es ist ein wenig schwer zu erklären, so werde ich versuchen, Code:

<div id="first" style="z-index: 2">In between</div> 
<div id="second" style="z-index: 1">In the back 
<div id="third" style="z-index: 3">Foreground</div></div> 

Das Problem ist, dass die auf einen höheren Wert z-Index des übergeordneten Einstellung wäre es in den Vordergrund statt der Rückseite, wo seine sein soll . Ich bin zufällig auf eine Lösung gestoßen: Ich habe eine Kopie des Vordergrundelements (id = dritte) außerhalb seines Elternteils gemacht.

<div id="first" style="z-index: 2">In between</div> 
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div> 
<div id="second" style="z-index: 1">In the back 
<div id="third" style="z-index: 3">Foreground</div></div> 

Es lohnt sich, dass in meiner ursprünglichen Code zu erwähnen, die Elemente haben keine IDs, damit ich nicht aus 2 Elementen leiden das gleiche zu teilen und mein HTML ungültig zu machen.

Ich denke, es ist sicher, diese Seltsamkeit als einen anderen Fehler zu klassifizieren, der zufällig mit dem Original hilft, aber es funktioniert, zumindest für mich. Hoffe jemand findet das nützlich!

Answer 3

Ich wollte beachten, dass wenn Sie IE8 und darunter verwenden, es CSS3-Filter nicht unterstützt. Das war mein Problem.

Ich war mit:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0); 

Egal, was ich meine Position oder z-Index, können Sie die andere Schicht nicht sehen, weil es eine komplette Maske über dieser Schicht verursacht wurde (anstelle des Gehens aus klar zu schwarz und wieder zu löschen).

Durch Entfernen des CSS3-Filters für nur IE8 konnte ich mein Problem lösen.

Hoffe das hilft jemandem, der in das gleiche Problem läuft.

Answer 4

Erstellen Sie ein zusätzliches transparentes Hintergrundbild für das Element, das Sie oben haben möchten, und legen Sie es anschließend fest. Für mich hat es endlich im IE8 funktioniert. SASS:

#galerie-link { 
    position: absolute; 
    z-index: 1000; 
    top: 25px; 
    left: 40px; 
    a { 
     display: block; 
     width: 185px; 
     height: 90px; 
     background-image: url(../images/transparent.png); 
    } 
    } 

Answer 5

Sieht aus wie ich bin ein Scherz, aber ich bin nicht

.myLinkCssClass { 
    background   : url(#); 
} 

Answer 6

ich das gleiche Problem in einem html hatte, wo viele wiederholt relativ positioniert divs absolute positioniert div Sicht blockiert wurden. Die Workaround von www.brenelz.com, die ich bereits erfolgreich eingesetzt habe, funktionierte in diesem Fall nicht. So funktionierte das Folgende für mich: Ich entfernte die relative Positionierung von den divs, die ich zuerst erwähnt habe, und fügte dann ein CSS hinzu, um diese divs beim Hover relativ zu schalten.Lassen Sie mich Ihnen den Code zeigen:

Vorher:

DivThatYouMustHover { 
height: 300px; 
position: relative; 
width: 200px; 
} 

Nach:

DivThatYouMustHover { 
height: 300px; 
width: 200px; 
} 
DivThatYouMustHover:hover { 
position:relative; 
} 

diese Weise die anderen Schwestern "dieses div Aufenthalt bei normalen Positionierung und nicht stören die Layout. Es hat sehr gut für mich gearbeitet! Ich hoffe es hilft dir auch.