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

我的网站有3个主要层：

1）包含元素的主视图（jsbin中的视图）-底层
2）覆盖层（白色背景不透明度。8#jsbin覆盖层）-中间层
3）上下文菜单（jsbin中的上下文菜单）-顶层

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

现在我的问题是我想在主视图中弹出一个元素。我想在上下文菜单和覆盖之间显示这个元素（jsbin中的#card1）…但我无法实现这一点。可能吗

这是我的jsbin：

谢谢你的帮助。 亲切问候,，

---

Bastien

将

位置：相对

添加到卡中<代码>z索引不应用于

静态

元素

重要的是要注意，如果“要弹出的元素”的任何父项都定义了自己的

z-index

，则此方法将不起作用（并且无法“弹出”），因为该父项定义了其子项的堆叠上下文。

只需将“位置：相对”添加到卡div

#card1 {
        z-index: 2;
        position: relative;
    }

---

JSbin

你能使你的JSbin可编辑吗？如果你的更改是在用户交互而不是页面加载时进行的，为什么不使用javascript呢？很难理解为什么需要覆盖。在本例中，您可以轻松地将css

opacity

放置到每个框中，然后将鼠标悬停在上方时分别更改每个不透明度。--虽然我可能读得太多了，因为你只说你想“跳出来”，但你没有说什么时候或如何。没问题，我可以使用javascript。。。但是怎么做呢？这里是可编辑的jsbin：谢谢！正是我想要的。