Css 嵌套自定义元素时的z索引似乎获得了一个新的堆栈上下文。为什么？

我的应用程序中有一个对话框，显示卡片列表。我制作了一个简化版的jsbin

如果我点击任何一张卡片上的蓝色轮廓，就会弹出一个漂亮的对话框，里面有一个简短的菜单项。特别是单击“Joe”下面的蓝色轮廓，查看对话框如何覆盖当前卡及其周围的内容

我需要重构代码，以便每个卡片操作中的当前元素是一个新的自定义元素，它带来了显示菜单对话框的所有功能。在实际应用程序中，这会对服务器进行一些ajax调用以更新信息

我遇到的问题是重构的事实破坏了对话框的显示方式。这里显示的是这个jsbin

单击“Joe”下的红色框，查看对话框如何位于当前卡上方，但如何滑入附近的其他卡下方

---

我认为这与“堆叠上下文”有关，因为向两个对话框中的每一个添加了z索引的显式样式应该意味着它仍然可以工作，但它不

具有活动对话框的

.item

需要设置一个高于其同级的

z索引。子下拉菜单的z索引相对于其父菜单的z索引，而不管它显式设置为什么。因此，如果最远的父卡没有使其能够与其他卡重叠的
z索引
，则其子卡将无法进行相同的操作
 请参见此答案的第一点@Heinrichenning不幸的是，在您的参考问题中，示例似乎已消失。我理解堆叠上下文的局限性——但我对元素的重构改变了什么呢？请更具体一点。在我给出的jsbin中，您可以看到id为“results”的Polymer
paper对话框的z索引为102，而
我的子元素
中的
paper对话框的z索引为105打开一个新的下拉列表，并注意该下拉列表的父项
。然后找到该
的父级，该父级是具有
.item
类名的元素。尝试将
z-index
仅设置为该元素，您将看到下拉列表将显示在其他卡片上。我已经将答案记入您的帐户，因为它是有效的。然而，我现在采取了一种不同的方法，创建了两个合作元素，这样对话就可以自然地放在正确的位置。这意味着我不需要反复复制对话框节点。