css - 当 z-index 不起作用时，如何将元素强制到顶部？

Question

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

为了演示它，这里有一个例子。obj2 将始终被 obj3 隐藏，尽管 obj2 的 z-index 为 1000000。

有什么解决方案吗？

.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 仅在容器也被标记为位置时应用：相对/绝对。如果您将ccc规则更改为以下内容，它将正常工作：

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

http://jsfiddle.net/RrUbh/