尽管 z-index 较低，但子元素与其他元素重叠？

Question

所以我今天一直在试验 z-index，我真的不明白这里发生了什么。

这是一个非常简化的 HTML 版本：

// content has z-index of 30, pos abs
<div class="content">
    // content-centered has z-index of 32, pos rel
    <div class="content-centered">
        // Text and buttons goes here
    </div>
</div>

// bubbles has z-index of 31, pos abs
<div class="bubbles">
    <div class="bubbles-centered">
        // Bubbles goes here
    </div>
</div>

目标是让 .content 提供背景内容，然后是背景上方的气泡，最后是气泡上方的内容。出于某种原因，正在发生的事情是气泡位于内容上方。

查看演示：http://jsfiddle.net/zFFkv/1/

给它几秒钟的时间让气泡出现在内容上。您无法选择文本或按下按钮，因为气泡层位于内容层之上，即使它设置在下方。这是怎么回事？子元素不继承父索引吗？

有什么想法吗？

Answer 1

您可以在气泡元素上将指针事件设置为无，以防止它阻塞下面的链接，尽管我认为它在 IE 中没有很好的支持。

.bubbles {
     pointer-events: none;
}

Demo

Answer 2

z-indices 是相对于其父级而不是整个文档进行解析的。

.bubbles 高于.content，这对你来说很重要。 .content 内的所有子级都将低于.bubbles，但可以相对于彼此排序。

要执行您想做的事情，.content-centered 和 .bubbles 必须是兄弟姐妹。