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

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

.bubbles高于.content，这就是您的情况。 .content内的所有子项都将低于.bubbles，但可以相对于彼此进行排序。

要做你想做的事情.content-centered而.bubbles必须是兄弟姐妹。

Answer 2

你可以在bubbles元素上设置指针事件为none，以防止它阻止下面的链接，虽然我不认为它在IE中有很大的支持。

.bubbles {
     pointer-events: none;
}

Demo

尽管z指数较低，但儿童与其他元素重叠？

2 个答案: