html - Z索引绝对定位困惑

在下面的例子中，我试图让弹出的“票”显示在其他门前：
http://codepen.io/anon/pen/EVMXVz
当文章悬停在上面时，我试图对div.appeal-details应用更高的z索引-我不确定这为什么不起作用：

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指数加上绝对的定位应该有用——但显然不行。
很想避免JS，但如果需要的话会做的。
谢谢！

最佳答案

您可以添加
position:relative; z-index:1;
为您的article和更高的article:hover服务
z-index:2;
或10；
检查示例：http://codepen.io/anon/pen/zvbdrB
另外，据我所知，javascript部分不需要。

关于html - Z索引绝对定位困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33786200/