当z-index不工作时如何强制元素到顶部？

Question

我正在编写一个chrome扩展，它使用注入来修改目标网页中的元素。 我想在光标移动元素时显示消息气泡。但我遇到一个问题，有时消息泡沫被其他一些元素隐藏。我发现这是因为如果元素B位于元素A的顶部，则z-index将不起作用，元素A（消息气泡）的子元素永远不会高于元素B.

为了演示它，这是一个例子。尽管obj2的z-index是1000000，obj2总是会被obj3隐藏。

有什么解决方案吗？

.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仅在容器也标记为position：relative / absolute时应用。如果您将ccc规则更改为以下规则，它将正常运行：

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

http://jsfiddle.net/RrUbh/