Wie erzwinge ich ein Element an die Spitze, wenn der Z-Index nicht funktioniert?

Question

Ich schreibe eine Chrome-Erweiterung, die Injektion verwendet, um das Element in Zielwebseite zu ändern. Ich möchte eine Nachrichtenblase anzeigen, wenn sich der Cursor auf einem Element bewegt. Aber ich stoße auf ein Problem, dass manchmal die Nachrichtenblase von einigen anderen Elementen verdeckt wird. Ich fand, dass z-Index nicht funktioniert, wenn ein Element B über Element A sitzt, ein untergeordnetes Element von Element A (Nachrichtenblase) nie höher als Element B.

Um es zu demonstrieren, hier ist ein Beispiel. Obj2 wird immer durch Obj3 verdeckt, obwohl Obj2s Z-Index 1000000 ist.

Gibt es irgendwelche Lösungen dafür?

.aaa{ 
    background-color:blue; 
    width:100px; 
    height:100px; 
} 
.ccc{ 
    background-color:red; 
    width:80px; 
    height:80px; 
    z-index:1000000; 
} 
.bbb{ 
    background-color:green; 
    position:relative; 
    top:-50px; 
    left:50px; 
    width:100px; 
    height:100px; 
} 

<div> 
    <section id=obj1 class="aaa"> 
    <article id=obj2 class="ccc"> 
    </article> 
    </section> 
</div> 
<section id=obj3 class="bbb"> 
</section> 

Answer 1

z-Index wird nur angewendet, wenn der Behälter auch als Position gekennzeichnet ist: relativ/absolut. Wenn Sie Ihre ccc Regel auf die Änderung folgenden es richtig funktioniert:

.ccc{ 
    position: relative; 
    background-color:red; 
    width:80px; 
    height:80px; 
    z-index:1000000; 
} 

http://jsfiddle.net/RrUbh/