Z-index 绝对定位混淆

Question

在下面的示例中，我试图让弹出 "tickets" 显示在其他门前：

http://codepen.io/anon/pen/EVMXVz

我试图在文章悬停时在 div.appeal-详细信息上应用更高的 z-index - 我不确定为什么这不起作用：

article:hover .record .jukebox-ticket {
  animation: growTicket 0.4s ease-in-out;
  display: block;
  position: absolute;
  top: 150px;
  margin: 0px auto;
  z-index: 20;
}

我的理解是较高的 z-index 与绝对定位相结合应该有效 - 但显然无效。

热衷于避免 JS，但如果需要会做。

谢谢！

Answer 1

您可以添加

position:relative; z-index:1;

你的 article 和 article:hover 更高的

z-index:2;

或 10;

检查示例：http://codepen.io/anon/pen/zvbdrB

P.S。而且据我所知，javascript 部分没有必要。