javascript - HTML/CSS 使用 z-index 将一个 DIV 放在其他之上

Question

我的网站有 3 个主要层:

1) 包含内部元素的主视图(jsbin 中的#views)- 底层
2) 叠加层(jsbin 中的白色背景不透明度为 .8 #overlay)- 中间层
3) 上下文菜单(jsbin 中的#contextmenu)- 顶层

当我显示上下文菜单时，3 层显示正确 -> 主视图被透明覆盖层“隐藏”，上下文菜单位于顶部。

现在我的问题是我想在主视图中弹出一个元素。我想在上下文菜单和叠加层之间显示此元素(jsbin 中的#card1)...但我无法实现。可能吗？

这是我的 jsbin:http://jsbin.com/gaxadaci/7/edit

感谢您的帮助。亲切的问候，巴斯蒂安

Answer 1

在卡片中添加position:relative； z-index 不适用于 static 元素。

重要的是要注意，如果“要弹出的元素”的任何父级定义了自己的 z-index，则此方法将不起作用(并且将没有“将其弹出”的方法)，因为该父级为其子级定义了堆叠上下文。