子元素的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/。等待几秒钟，气泡才会出现在内容上面。您无法选择文本或按按钮，因为气泡层位于内容层上方，尽管它的设置比内容层低。到底发生了什么？子元素不继承父元素的索引吗？

有任何想法吗？

- qwerty

---

也许这对您有帮助：http://www.vanseodesign.com/css/css-stack-z-index/ 我还没有阅读它，但这是一篇关于z-index的完整文章。 - Rob

Answer 1

z-index 是相对于其父级元素而不是整个文档解析的。

.bubbles 位于 .content 之上，在你的情况下这是唯一重要的。所有在 .content 内部的子元素将会位于 .bubbles 之下，但是它们可以相对于彼此排序。

要实现你想要的效果，.content-centered 和 .bubbles 必须成为兄弟元素。

- freejosh

---

好吧，糟糕了。这对我来说不是真正的替代方案。如果您检查了演示文稿，您会发现我在.content中有几个<segment>，每个都有自己的.content-centered。将.bubbles放在.content-centered内意味着需要多个副本，这不好。（它也感觉不对）有什么解决方法吗？ - qwerty

我并不是说把.bubbles放在.content-centered里面，而是放在.content里面。在你的简单示例中，这意味着.bubbles可以在.content上方和.content-centered下方。在演示中，这意味着气泡容器与“section”并排，并且可以在它们下方。 - freejosh

更准确地说，它们是相对于它们的堆叠上下文。这些上下文通常由定位父元素创建，但并非严格如此。 - BoltClock

@freejosh 看这个：http://i.imgur.com/Qbe9h.png。这就是它实际上的样子。把每个`<section>看作.content。每个<section>都有自己的背景和30的z-index。由于有多个部分（将它们视为页面），我必须有多个.bubbles的副本（每个部分内部都有一个）。我可以把背景从每个段落中移到#slide-container`的同级元素中，那样就可以了。 - qwerty

Answer 2

您可以将指针事件设置为无以在气泡元素上防止其阻挡下方的链接，尽管我认为IE对此的支持不太好。

.bubbles {
     pointer-events: none;
}

Demo

- ferne97

---

很好，不知道那个！ - qwerty