how to force an element to the top when z-index is not working?

Question

I am writing a chrome extension which using injection to modify the element in target webpage. I want to show a message bubble when cursor move on an element. But I encounter a problem that sometimes the message bubble is hidden by some other elements. I found that it was because z-index will not work if an element B sits on top of element A, a child element of element A(message bubble) can never be higher than element B.

To demonstrate it,Here is an example. That obj2 will always be hidden by obj3, although obj2's z-index is 1000000.

Is there any solutions for it?

.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 is only applied when the container is also marked as position: relative/absolute. If you change your ccc rule to the following it will work correctly:

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

http://jsfiddle.net/RrUbh/