jak zmusić element do góry, gdy z-index nie działa?

Question

Piszę rozszerzenie chrome, które za pomocą wtrysku do modyfikowania elementu na stronie docelowej. Chcę wyświetlić dymek wiadomości po przesunięciu kursora na elemencie. Ale napotykam problem, że czasami dymek wiadomości jest ukryty przez inne elementy. Stwierdziłem, że było tak, ponieważ indeks Z nie zadziała, jeśli element B zostanie umieszczony na elemencie A, element potomny elementu A (dymek wiadomości) nigdy nie może być wyższy niż element B.

Aby to pokazać, tutaj jest przykładem. Ten obj2 zawsze będzie ukryty przez obj3, chociaż indeks z0 obj2 wynosi 1000000.

Czy są jakieś rozwiązania dla niego?

.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 indeks jest stosowany tylko wtedy, gdy pojemnik jest także oznaczona jako pozycja: względna/absolutny. Jeśli zmienisz regułę ccc do następujących będzie działać poprawnie:

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

http://jsfiddle.net/RrUbh/