Z-Index überlagert keine Divs weiter unten im DOM
Ich versuche, ein Tooltip-ähnliches System zu erstellen, bei dem durch ein mouseenter-Ereignis ein div angezeigt wird, das den Inhalt überlagert. Leider ist das Problem, auf das ich gestoßen bin, dass contentspäte im DOM verschwindet nicht in IE7, während Inhalte früher korrekt hinter dem z-indizierten Element verschwinden.
Hier ist ein Beispielcode, der das Problem veranschaulicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<style>
.container { margin-top: 200px; }
.node { float: left; width: 100px; height: 100px; background: #eee; margin-right: 50px; position: relative;}
.two { position: absolute; left: -200px; top: 20px; width: 500px; height: 500px; background: green; z-index: 200;}
</style>
<div class="container">
<div class="node">
<div class="one"></div>
</div>
<div class="node">
<div class="two"></div>
</div>
<div class="node">
<div class="three"></div>
</div>
</div>
</body>
</html>
as Wesentliche ist ziemlich einfach. 3 identische graue Kästen. Außer in einer dieser Boxen gibt es den Tooltipp (die riesige grüne Box). Wenn Sie dies in Firefox anzeigen, funktioniert es einwandfrei. Wenn Sie es in IE7 anzeigen, werden Sie feststellen, dass das grüne Kästchen den ersten Knoten, den zweiten Knoten und den dritten Knoten überlagert. Wenn Sie die Eigenschaft z-index: 1 auf .node setzen, werden Sie feststellen, dass sie auch in Firefox dasselbe Verhalten aufweist.
LÖSUN
Dank der Antwort unten konnte ich mich auf den richtigen Weg bringen. Stellen Sie zunächst den Z-Index aller QuickInfos auf das höchste Element ein. Stellen Sie dann den Z-Index aller Knotenelemente auf eine niedrigere Zahl ein. Ich habe 10 und 0 verwendet. Als Nächstes muss der Z-Index des Elements mit dem höchsten Bruder beim Hover höher sein als der der Brüder. In diesem Fall sollte .child2 über allem stehen Ich muss den Z-Index des höchsten übergeordneten Elements festlegen, das ein Bruder von allem ist, was ich überlagern möchte (dies können mehrere übergeordnete Elemente in der Kette sein). In diesem Fall ist es ein Knoten. Daher muss der Z-Index des Knotens, der .two enthält, höher sein als der Z-Index des anderen Knotens. Wenn sich der Tooltip auf Knoten -> Unterknoten -> Tooltip befände und dieser Knoten an ähnliche Bäume angrenzt, müsste ich den Knoten-Z-Index (2 übergeordnete Elemente) festlegen.