4

所以我今天一直在试验 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/

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

有任何想法吗？

4

2 回答 2

3

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

.bubbles在上面.content，这就是你的情况。里面的所有孩子.content都将在下面.bubbles，但可以相对于彼此排序。

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

于 2012-12-19T21:07:44.040 回答
2

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

.bubbles {
     pointer-events: none;
}

演示

于 2012-12-20T09:00:34.703 回答